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