Select + hold and drag a shape should scroll horizontally or vertically

Question

I want a shape i.e. Rect select using the mouse (left hold and drag) should scroll it horizontally if goes to right side and if goes to bottom should scroll vertically in React Konva.

If anyone has used trello, i'm trying to emulate the ability to drag horizontally using the mouse, instead of the scrollbar.

This is my demo where i have increased the width and height of Stage. While dragging it to right side. it should scroll and can be placed at last. If anyone knows how to implement it please answer.

score 1 · Answer 1 · answered Aug 20 '20 at 16:39

I am doing Drag and Drop may be in a bit different manner. But see here, I actually used below code on DragMove event handler, to handle scroll while dragging an item.

    const viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    const scrollTop = (document.documentElement &amp;&amp; document.documentElement.scrollTop) || document.body.scrollTop;
     
    const scrollLimit = document.body.scrollHeight - viewPortHeight;
     
    // See if we need to scroll while dragging
    if (scrollLimit >= 0) {
        const scrollSpeed = 20;
        const scrollSensitivity = 50;
        if (((event.pageY - scrollTop) <= scrollSensitivity)) {
            window.scrollTo(0, (scrollTop - scrollSpeed));
        } else if (((viewPortHeight + scrollTop - event.pageY) <= scrollSensitivity) &amp;&amp; (scrollTop <= scrollLimit)) {
            // mobile browsers sometimes report scrollTop as 0, this hack gets the accurate value
            if (scrollTop === 0) { window.scrollTo(0, 1); }
            window.scrollTo(0, (scrollTop + scrollSpeed));
        }
    }

I am not sure, whether the above code is suitable or not but Here is a full React example, may help for you.. https://devtrigger.com/drag-and-drop-elements-with-auto-scroll/

Great efforts. but i want the div to move along with the scroll. in your demo, the div disappears when i scroll right. — Nidhi Dadiya, Aug 20 '20 at 17:03
Thank you. Yes, because there is no content, see I have updated example, added Drop area on bottom of page. And it is not disappearing while dragging.. — Ramesh Babu, Aug 21 '20 at 08:31

score 0 · Answer 2 · answered Aug 19 '20 at 16:54

There are many ways to do that. If you want to scroll (or just move) stage when a node is close to an edge you can do this:

  const [stagePos, setStagePos] = React.useState({ x: 0, y: 0 });
  const saveStagePosition = (stage) => {
    setStagePos(stage.position());
  };

  const handleDragMove = (e) => {
    const absPos = e.target.absolutePosition();
    const stage = e.target.getStage();
    if (absPos.x < TRIGGER_PADDING) {
      stage.to({
        x: stage.x() + TRIGGER_PADDING,
        onFinish: () => saveStagePosition(stage)
      });
    }
    if (absPos.y < TRIGGER_PADDING) {
      stage.to({
        y: stage.y() + TRIGGER_PADDING,
        onFinish: () => saveStagePosition(stage)
      });
    }
    if (absPos.x > stage.width() - TRIGGER_PADDING) {
      stage.to({
        x: stage.x() - TRIGGER_PADDING,
        onFinish: () => saveStagePosition(stage)
      });
    }
    if (absPos.y > stage.height() - TRIGGER_PADDING) {
      stage.to({
        x: stage.y() - TRIGGER_PADDING,
        onFinish: () => saveStagePosition(stage)
      });
    }
  };

Then use that handleDragMove for your dragging nodes. Also you can make calculations a bit better by comparing e.target.getClientRect() instead of e.target.absolutePosition().

Demo: https://codesandbox.io/s/react-konva-scroll-stage-on-drag-wdu89?file=/src/index.js

Hi, your demo doesn't work when i change the `stage` width and height. — Nidhi Dadiya, Aug 20 '20 at 11:38
@NidhiDadiya do you want to enable native scrolling when a shape on the edge of the screen? — lavrton, Aug 20 '20 at 15:22
Basically it is better to have a stage as small as possible for performance reasons. — lavrton, Aug 20 '20 at 15:22
i understand. but it's needed. is there any way to scroll a shape with dynamic width and height ? and i don't know what native scrolling is ! — Nidhi Dadiya, Aug 20 '20 at 15:31
is there any solution with stage height and width are dynamic? — Nidhi Dadiya, Sep 11 '20 at 08:29

Select + hold and drag a shape should scroll horizontally or vertically

2 Answers2