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必须包含在允许的放置目标中），所以你赢了＆＃39;能够开箱即用。

可以做的事情是这样设置的，这样你想知道这种状态的每个放置目标都被配置为允许所有你的itemTypes，然后处理它们是否可以＆＃39 ;与你自己传递给组件的另一个道具一起掉落。然后在drop函数中，您可以使用此prop来确定是否实际处理无法删除的drop或console日志。它可能看起来像这样：

＆＃13;

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)

＆＃13;

请注意，您甚至可以在您不想要任何实际可放入的内容周围制作放置容器，并且如果您想要这种交互，只需记录它不能被删除。

如何检测可拖动项是否可以在react-dnd中的当前位置进行删除

1 个答案: