reactjs - 选择并按住并拖动形状应水平或垂直滚动

Question

我想要一个形状，即Rect使用鼠标选择（左按住并拖动）如果到右侧应该水平滚动，如果到底部应该在 React Konva 中垂直滚动。

如果有人使用过 trello，我正在尝试模拟使用鼠标而不是滚动条水平拖动的能力。

这是我的演示，我增加了Stage. 同时将其拖动到右侧。它应该滚动，最后可以放置。如果有人知道如何实现它，请回答。

Answer 1

我在做拖放可能会有点不同。但是请看这里，我实际上在 DragMove 事件处理程序上使用了以下代码，以在拖动项目时处理滚动。

    const viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    const scrollTop = (document.documentElement && 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));
        }
    }

我不确定上面的代码是否合适，但这是一个完整的 React 示例，可能对您有所帮助.. https://devtrigger.com/drag-and-drop-elements-with-auto-scroll/

Answer 2

有很多方法可以做到这一点。如果您想在节点靠近边缘时滚动（或只是移动）舞台，您可以这样做：

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

然后将其handleDragMove用于拖动节点。您也可以通过比较e.target.getClientRect()而不是e.target.absolutePosition().

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