1

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

例如，我想在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'。

我无法在文档中找到解决方案，不胜感激。

4

1 回答 1

1

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

但是，您可以做的是设置它，以便将您想了解此状态的每个放置目标配置为允许您的所有 itemTypes，然后使用传递给的另一个道具处理它们是否可以放置自己组成。然后在 drop 函数中，您可以使用此 prop 来确定是否实际处理 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)

请注意，您甚至可以在您不希望任何东西实际上可以放入的东西周围制作放置容器，并且如果您想要这种交互，请始终记录它不能被丢弃。

于 2017-05-21T21:24:43.750 回答