Question

我正在研究一个我遵循react-dnd documentation的反应项目。一切正常，但拖拉时我无法滚动。

当我拖动一个项目并到达最后一个droptable源时，我需要一个滚动条，然后它会自动滚动并允许我将项目放在那里。

如果有人知道如何做到这一点，请与我分享。我会非常感激的。

Answer 1

我已经尝试了一些方法来实现这一点，希望它们对您有所帮助：

react-dnd-scrollzone。

当你将可拖动组件拖动到容器边缘时，该包可以使容器滚动。但是，它必须应用于扭曲的容器，这不是我对象的目的，所以我摆脱了它。

在 rowSource 中实现滚动行为

const rowSource = {
  isDragging(props, monitor) {
    // determine mouse position
    const clientOffset = monitor.getClientOffset();

    if (clientOffset) {
      // you can implement your own scroll behavior here

      // scroll up if dragging to an upper area
      const moveThreshold = Math.max(120, window.innerHeight / 4);

      if (clientOffset.y < moveThreshold && !window.isScrolling) {
        // scroll up
        window.isScrolling = true;

        $("html, body").animate(
          {
            scrollTop: window.pageYOffset - moveThreshold,
          },
          {
            duration: 300,
            complete: () => {
              window.isScrolling = false;
            },
          }
        );
      }
    }
  },
};

@DragSource("YOUR_DRAG_TYPE", rowSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
}))
class DraggableItem extends Component {
// your component
}

使用自动滚动

1 个答案: