Drag & Drop releted issue(auto horizontal scroll))

hardik.rathavi · 2024-11-25T13:28:33.714Z

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!

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?

image1785×466 32.7 KB

image1790×704 56.4 KB

hardik.rathavi · 2024-11-26T09:32:03.419Z

I found the solution!

function enableScrollOnDrag() {
  var scrollThreshold_Left = 100;  // Constrain area to 100px from the left for scroll
  var scrollThreshold_Right = 100; // Constrain area to 100px from the right for scroll
  var scrollSpeed_Desktop = 6;
  var scrollSpeed_Mobile = 6;

  var isScrollingLeft = false;
  var isScrollingRight = false;

  function startScrolling(direction) {
    if (direction === 'left') {
      isScrollingLeft = true;
      isScrollingRight = false;
    } else if (direction === 'right') {
      isScrollingRight = true;
      isScrollingLeft = false;
    }
  }

  function stopScrolling() {
    isScrollingLeft = false;
    isScrollingRight = false;
  }

  function continuousScroll() {
    var scrollElement = document.getElementById("your-scollable-container-id");
    if (scrollElement && (isScrollingLeft || isScrollingRight)) {
      if (isScrollingLeft) {
        scrollElement.scrollBy(-scrollSpeed_Desktop, 0); // Scroll left
      } else if (isScrollingRight) {
        scrollElement.scrollBy(scrollSpeed_Desktop, 0); // Scroll right
      }
    }
  }

  document.addEventListener("mousemove", function (event) {
    var scrollElement = document.getElementById("your-scollable-container-id");

    var rect = scrollElement ? scrollElement.getBoundingClientRect() : null;

    if (rect && event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom) {

      if (event.clientX - rect.left < scrollThreshold_Left && !isScrollingLeft) {
        startScrolling('left');
      }
      else if (rect.right - event.clientX < scrollThreshold_Right && !isScrollingRight) {
        startScrolling('right');
      }

      else if (event.clientX >= rect.left + scrollThreshold_Left && event.clientX <= rect.right - scrollThreshold_Right) {
        stopScrolling();
      }
    } else {
      stopScrolling();
    }
  });

  setInterval(continuousScroll, 20);

}

enableScrollOnDrag();

system · 2024-12-09T13:29:30.227Z

This topic was automatically closed after 14 days. New replies are no longer allowed.