Horizontal Scroll in RG with drag and drop

Questions
1

I have an RG (currently 7 columns, 3 are showing 4 are findable in a horizontal scroll), and the user can make more.
The RG columns have a DROP area.
The cards in the column are dropable.
I can drag and drop the cards in the column to other columns, update the data, and make sure it stays in that column. WORKS! :slight_smile:

Now because there are so many columns, when a user picks a card in column 1 and wants to move it to the last column, the user can’t get there. Because when picking up the card the screen doesn’t ‘auto-scroll’ to the directing I want it to go.

Any suggestions on how to scroll, while having a draggable object?

2

Hey @naos - I’m facing the same issue, have you ever found a solution for this by any chance?

3

Sadly no,… I changed the design. We skipped cards altogether. Turns out our users didn’t like cards anyway for the data we were showing.

4

I’ve just come across this problem. Has anyone found a solution?

5

Issue still running here too… Any idea on how to solve it?

6

Actually seen there has been a solution posted!
Just have to add it to an html element with & .

→ But still not working when the scroll is within a group!

7

Hi bubblers,

Just figured out how to scroll when dragging & dropping within a group!

  1. give an idea to your group (here it is ‘team’)
  2. add a HTML element to your page, with the following code (replace my ‘team’ id by the id you set to the group). Don’t forget to add script and /script balises at the beginning/end
  3. magic happens!

function enableScrollOnDrag() {
var teamGroup = document.getElementById(‘team’);
var scrollThreshold_Desktop = 90;
var scrollSpeed_Desktop = 20;

var scrollInterval;

$(document).on(“mousemove”, function(event) {
var activeElement = $(“.ui-droppable-active”);
if (activeElement.length > 0 && activeElement.closest(“#team”).length > 0) {
if (event.clientY<teamGroup.offsetTop + scrollThreshold_Desktop) {
clearInterval(scrollInterval);
scrollInterval = setInterval(function() {
teamGroup.scrollTop -= scrollSpeed_Desktop;
}, 10);
} else if (event.clientY > window.innerHeight - scrollThreshold_Desktop) {
clearInterval(scrollInterval);
scrollInterval = setInterval(function() {
teamGroup.scrollTop += scrollSpeed_Desktop;
}, 10);
} else {
clearInterval(scrollInterval);
}
}
});

$(document).on(“mouseup touchend”, function() {
clearInterval(scrollInterval);
});
}

$(document).ready(function() {
enableScrollOnDrag();
});

8

Hi @jehan.ore I am currently working on this, but having trouble replicating your code.

Just so I’m clear - the group (‘team’ in your case) should be the container that should be scrolling, correct?

Also, did you make any other changes to any other elements (like the draggable element)?

Thanks!