如何检测可拖动项目是否可以在 react-dnd 中的当前位置放置

Question

我正在寻找一种方法来检测在当前位置是否可以放置可拖动的项目。

例如，我想在每次将可放置项目移动到不可放置的位置时打印 console.log('I can not be dropped here')。

我们以下面的伪标记为例：

<body>
  <h1>cool heading - you cant drop me here</1>
  <droptarget1>
    you can drop me here
  </droptarget1>
  <droptarget2>
    or you can drop me here
  </droptarget2>
  <dragsource>
    I can be dragged
  </dragsource>
</body>

将 dragsource 悬停在 h1 上时，我希望控制台打印 'I can not be dropped here'。

我无法在文档中找到解决方案，非常感谢任何帮助。

Answer 1

只有当被拖动的元素被拖放到有效的放置目标上时，React DND 才会检测到触发的放置事件（因为它的 itemType 必须包含在允许的放置目标中），因此您将无法开箱即用。

然而，您可以做的是设置它，以便您想要了解此状态的每个放置目标都配置为允许所有 itemTypes，然后处理它们是否可以或不能与您自己传递给组件的另一个道具一起删除。然后在 drop 函数中，您可以使用此属性来确定是否实际处理无法删除的删除或控制台日志。它可能看起来像这样：

import React, { PropTypes } from 'react';
import { DropTarget } from 'react-dnd';

import { ItemTypes } from 'myItemTypes';


const myDropComponentTarget = {
  drop(props, monitor, component) {
    if ((monitor.getItemType() === ItemTypes.MY_ITEM_TYPE) && canDropMyItemType) {
      console.log('CAN DROP ITEM TYPE HERE')
    } else {
      console.log('CANNOT DROP ITEM TYPE HERE')
    }
  }
}

function collect(connect) {
  return {
    connectDropTarget: connect.dropTarget(),
  }
}

class MyDropComponent extends React.Component {

  static propTypes = {
    connecDropTarget: PropTypes.func.isRequired,
    canDropMyItemType: PropTypes.bool.isRequired,
  }

  render() {
    return this.props.connectDropTarget(
      <div>
        CHECK IF YOU CAN DROP HERE
      </div>
    );
  }
}

module.exports = DropTarget([ItemTypes.MY_ITEM_TYPE], myDropComponentTarget, collect)

请注意，您甚至可以在您不希望任何东西真正可放入其中的东西周围制作放置容器，如果您想要那种交互，只需始终记录它不能被放置。

如何检测可拖动项目是否可以在 react-dnd 中的当前位置放置

How to detect if draggable item is droppable at current location in react-dnd

javascript

reactjs

react-dnd