Question

如何控制台我的文件，该文件所在的放置区域是我要移动的节点的ID（可拖动的项目）。我相信我应该使用documentation中指定的monitor.getItem()，但我不理解，

我的可拖动对象上有ref={drag}，可放置节点上有ref={drop}。

可拖动项：

  const [{ isDragging }, drag] = useDrag({
    item: { type: 'TODO_ITEM' },
    collect: monitor => ({
      isDragging: !!monitor.isDragging()
    }),
    drag: () => {
      console.log('dragging')
    }
  })

拖放区域

  const [{ isOver, canDrop }, drop] = useDrop({
    accept: 'TODO_ITEM',
    collect: mon => ({
      isOver: !!mon.isOver(),
      canDrop: !!mon.canDrop()
    }),
    drop: monitor => {
      console.log(monitor)
      // monitor only returns { type: 'TODO_ITEM' }
    }
  })

Answer 1

我通过以下方式解决了该问题：通过可拖动物品上的道具拉入物品，将其附加到显示器上，然后在可放置区域拾取它。

可拖动项

export default function TodoItem ({ item }) {

  const [{ isDragging }, drag] = useDrag({
    item: { type: 'TODO_ITEM', itemID: item._id },
    collect: monitor => ({
      item: monitor.getItem(),
      isDragging: !!monitor.isDragging()
    })
  })

...

放置区域：

  const [{ isOver, canDrop }, drop] = useDrop({
    accept: 'TODO_ITEM',
    collect: mon => ({
      isOver: !!mon.isOver(),
      canDrop: !!mon.canDrop()
    }),
    drop: monitor => {
      console.log('moving item:', monitor.itemID)
    }
  })

React DnD-如何获取被拖动项的ID

1 个答案: