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

问题描述

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

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

这是我的demo，在其中我增加了Stage的宽度和高度。同时将其拖动到右侧。它应该滚动并可以放置在最后。如果有人知道如何实现，请回答。

解决方法

我正在执行的拖放操作可能有所不同。但是请看这里，我实际上在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/

,

有很多方法可以做到这一点。如果要在节点靠近边缘时滚动（或仅移动）舞台，可以执行以下操作：

  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