jquery - 用自动滚动反应 dnd

Question

我正在研究一个 react dnd 项目，我正在关注react-dnd 文档。一切正常，但我无法在拖动时滚动。

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

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

Answer 1

React Dnd 提供了DragLayer组件，对你有帮助。

您可以在 scollable 组件中添加 DragLayer，并在满足滚动条件时调用回调。

您还可以添加一些 div，您可以在其上侦听自定义 DragLayer 中的 onMouseOver 事件并抛出回调以设置父/可滚动组件的滚动。

@dragLayer( monitor => ({
   isDragging   : monitor.isDragging(),
}) )
class DragLayer extends Component {
  render() {
   if(!this.props.isDragging) {
     return null;
   }
   return <div onMouseOver={this.props.onScrollOver}></div>
  }

}

class ScrollableContainer extends Component {
....


  _doScroll(event) { 
    const scrollTaget = this._scrollTarget;
    scrollTarget.scrollTop++; //Or You can add animations here
  }

  render() {

   ...return <div style={{overflow:'auto'}}>
      <DragLayer onScrollOver={this._doScroll}/> 
     </div>;
  }
 }

Answer 2

React Dnd 提供了一个滚动可排序列表的示例，您可以在以下链接中找到： React Dnd with auto scroll

您可以在 useDrop 的悬停部分中使用以下代码：

hover(item: DragItem, monitor: DropTargetMonitor) {
  if (!ref.current) {
    return
  }
  const dragIndex = item.index
  const hoverIndex = index

  // Don't replace items with themselves
  if (dragIndex === hoverIndex) {
    return
  }

  // Determine rectangle on screen
  const hoverBoundingRect = ref.current?.getBoundingClientRect()

  // Get vertical middle
  const hoverMiddleY =
    (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2

  // Determine mouse position
  const clientOffset = monitor.getClientOffset()

  // Get pixels to the top
  const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top

  // Only perform the move when the mouse has crossed half of the items height
  // When dragging downwards, only move when the cursor is below 50%
  // When dragging upwards, only move when the cursor is above 50%

  // Dragging downwards
  if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
    return
  }

  // Dragging upwards
  if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
    return
  }

  // Time to actually perform the action
  moveCard(dragIndex, hoverIndex)

  // Note: we're mutating the monitor item here!
  // Generally it's better to avoid mutations,
  // but it's good here for the sake of performance
  // to avoid expensive index searches.
  item.index = hoverIndex
},

Answer 3

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

1. 反应-dnd-滚动区。

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

2. 在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
}