我正在寻找一种方法来检测可拖动项目是否可放置在当前位置。
例如，每次可放置项目移动到不可放置的位置时，我想打印 console.log('I can't be drop 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't drop here'。
我无法在文档中找到解决方案，希望得到任何帮助。
最佳答案
仅当被拖动的元素被拖放到有效的放置目标上时，React DND 才会检测到触发的放置事件(因为它的 itemType 必须包含在允许的放置目标中)，因此您将无法执行此操作开箱即用。
但是，您可以做的是设置它，以便将您想要了解此状态的每个放置目标配置为允许您的所有 itemType，然后处理它们是否可以或不可以与您自己传递给组件的另一个 prop 一起删除。然后在 drop 函数中，您可以使用此 prop 来确定是否实际处理 drop 或控制台日志，表明它无法被 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)请注意，如果您想要这种交互，您甚至可以在您不希望任何实际可放入的东西周围创建放置容器，并且始终记录它无法被放置。
关于javascript - 如何检测可拖动项目是否可在react-dnd中的当前位置放置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43978583/