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!