Horizontal Scroll in RG with drag and drop

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?

1 Like

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

1 Like

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.

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

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

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!

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();
});

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!