reactjs - react-dnd ：检查拖动的源是否在有序列表中的原始位置之前或之后

Question

我正在使用反应-dnd。我想知道当前悬停的目标是在 dnd dom 对象的有序列表中拖动的源之前还是之后，并将其作为 css 类传递给 dom 对象。我希望能够为我自己的自定义函数比较源和目标之间的道具。

如何创建自定义源-目标-关系函数（如 isOver、canDrop 等）？我想创建一个 isBeforeDraggedSource() 函数。

Answer 1

除了分叉库之外，我认为您不能创建这样的自定义关系，但您可以修改 collect 函数来创建自己的关系。可能是这样的

static collect = (connect, monitor) => {
  return {
    isBeforeDraggedSource: <my function>    
  }
}

然后，您可以使用 monitor.getItem() 获取当前拖动的项目，将其与道具进行比较，然后从那里开始。如果您想要当前拖动项目的道具，只需将它们作为拖动项目的一部分传递。相反，您可以将 getItem 通过 collect 传递，然后在 render 内部使用它来比较它的道具和当前的对象道具。