0

我有一个类型的 dragSource，我们称之为它Card，还有一个 dropTarget Stacks。有很多叠，但不能将每张牌都丢给所有叠。所以在Stack'scanDrop方法中，我得到了Card被拖动，运行一些比较并返回该卡是否可以被丢弃。

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

我现在的问题是，当放置操作失败时，我想显示一条消息，例如“由于某些原因，您不能在此处放置此卡”。我该怎么做react-dnd？我不能使用 的结果canDrop，因为下降从未发生过，所以没有处理？我可以将canDrop逻辑移动到将卡片移动到所需的函数中Stack，但随后react-dnd只会指定 aCard可以放在 a 上Stack，并且如果卡片可以放在某个堆栈上的所有逻辑将由我的代码处理.

这个对吗？有没有其他方法可以使用我没有看到的库来做到这一点？什么是一个好的方法？

4

1 回答 1

0

您可以通过 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'
  }

}
于 2018-01-12T16:47:09.107 回答