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

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