Question

我有一种dragSource，我们称之为Card，还有一个dropTarget Stacks。堆栈很多，但每张卡都不能丢弃。因此，在Stack的{{1}}方法中，我会拖动canDrop，运行一些比较并返回是否可以删除该卡。

所以，直到这里一切都很好。当用户尝试将Card放到错误的Card时，Stack会返回false并且没有任何反应。

现在我的问题是，当放置操作失败时，我想显示一条消息，例如“你因为原因不能放弃这张卡”。如何使用canDrop执行此操作？我无法使用react-dnd的结果，因为丢弃从未发生过，因此无法处理？我可以将canDrop逻辑移动到将卡移动到所需canDrop的函数，但是Stack只会指定react-dnd可以放在Card上{1}}以及如果卡可以放在某个堆栈上的所有逻辑将由我的代码处理。

这是对的吗？有没有其他方法可以使用我没有看到的库？对此有什么好处？

Answer 1

您可以通过DragSourceMonitor访问已完成拖动的状态（无论是否成功）。你仍然需要聪明/肮脏如何通过不同的原因，我很确定即使不能丢弃也会调用悬停，因此当你拖动不兼容的放置目标时会缓存一个原因，然后在拖动完成时清除它...

const reasons = '';

const dragSourceSpec = {
  //... 

  endDrag: (props, monitor, component) => {
    if (!monitor.didDrop()) {
      console.warn('Drop could not be handled, because of: ', reasons)
    } else {
      console.info('Drop was handled, and returned: `, monitor.getDropResult())
    }
    // reset reason for next drag
    reasons = ''
  }

}

const dropTargetSpec = {
  //...

  hover: (props, monitor, component) => {
    reasons = monitor.canDrop() ? '' : 'Stack is full'
  }

}

检查canDrop（）结果

1 个答案: