Fatal编程技术网
  • javascript/
  • Javascript 如何检测react dnd中的当前位置是否可拖放项目

Javascript 如何检测react dnd中的当前位置是否可拖放项目

javascript reactjs

Javascript 如何检测react dnd中的当前位置是否可拖放项目,javascript,reactjs,react-dnd,Javascript,Reactjs,React Dnd,我正在寻找一种方法来检测一个可拖动的项目是否可以在当前位置拖放 例如，每次将可拖放项移动到不可拖放的位置时，我都要打印console.log（'I can not drop here'） 让我们以以下伪标记为例： <body> <h1>cool heading - you cant drop me here</1> <droptarget1> you can drop me here </droptarget1>

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

例如，每次将可拖放项移动到不可拖放的位置时，我都要打印
console.log（'I can not 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
上时，我希望控制台打印
“我不能放在这里”

我在文档中找不到解决方案，非常感谢您的帮助。

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

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

import React，{PropTypes}来自'React'；
从'react dnd'导入{DropTarget}；
从“myItemTypes”导入{ItemTypes}；
常量myDropComponentTarget={
下降（道具、监视器、组件）{
if（（monitor.getItemType（）==ItemTypes.MY\u ITEM\u TYPE）&&canDropMyItemType）{
console.log（'可以在此处删除项目类型'）
}否则{
console.log（'无法在此处删除项目类型'）
}
}
}
函数收集（连接）{
返回{
connectDropTarget:connect.dropTarget（），
}
}
类MyDropComponent扩展了React.Component{
静态类型={
connecDropTarget:PropTypes.func.isRequired，
canDropMyItemType:PropTypes.bool.isRequired，
}
render（）{
返回此.props.connectDropTarget(
看看你能不能在这里下车
);
}
}

module.exports=DropTarget（[ItemTypes.MY_ITEM_TYPE]，myDropComponentTarget，collect）
您是否尝试过使用
DropTarget的
方法？有没有具体的原因说明它对您的用例没有帮助？谢谢您的回答！对于不受react控制的dom节点，这是如何工作的？你说的“不受react控制”是什么意思？假设我们有以下标记
，并且react被渲染到
id=app
，我如何检测主体/外部节点上的跌落？react dnd不能做到这一点。您必须使用jquery或其他工具来实现这一点。这很不幸，但这正是我所期望的。谢谢你的回答！