＆lt; p＆gt;我创建了一个简单的＆lt; a href =＆＃34; http：//react-dnd.github.io/react-dnd/docs-overview.html" rel =＆＃34; nofollow noreferrer＆＃34;＆gt; Dnd example＆lt; / a＆gt;，包含以下组件：＆lt; / p＆gt;
＆lt; p＆gt; Externalevents.js（拖动源）＆lt; / p＆gt;
＆lt; pre＆gt;＆lt; code＆gt;导入React，{Component}来自＆＃39;反应＆＃39 ;;
从＆＃39; react-dnd＆＃39;导入{DragSource};
import＆＃39; ./ customCal.css＆＃39 ;;
const ItemTypes = {
活动：＆＃39;活动＆＃39;
};
const eventSource = {
beginDrag（道具）{
return {};
}，
endDrag（props，monitor）{
const item = monitor.getItem（）
const dropResult = monitor.getDropResult（）
if（dropResult）{
alert（`你把$ {item.name}丢入$ {dropResult.name}！`）
}
}，
}
function collect（connect，monitor）{
返回{
connectDragSource：connect.dragSource（），
connectDragPreview：connect.dragPreview（），
isDragging：monitor.isDragging（）
}
}
class externalEvents扩展Component {
render（）{
const {connectDragSource，isDragging} = this.props;
const {name} = this.props;
return connectDragSource（
＆lt; span＆gt; {name}＆lt; / span＆gt;
）
}
}
export default DragSource（ItemTypes.EVENT，eventSource，collect）（externalEvents）;
＆LT; /代码＆GT;＆LT; /预＆GT;
＆lt; p＆gt; customCal.js（放弃目标）＆lt; / p＆gt;
＆lt; pre＆gt;＆lt; code＆gt;导入React，{Component}来自＆＃39;反应＆＃39 ;;
从＆＃39; react-dnd＆＃39;中导入{DropTarget};
import＆＃39; ./ customCal.css＆＃39 ;;
const calTarget = {
canDrop（道具）{
返回true;
}，
drop（道具）{
}
};
function collect（connect，monitor）{
返回{
connectDropTarget：connect.dropTarget（），
isOver：monitor.isOver（），
canDrop：monitor.canDrop（）
};
}
const ItemTypes = {
活动：＆＃39;活动＆＃39;
};
class customCal extends Component {
render（）{
const {connectDropTarget，isOver，canDrop} = this.props;
return connectDropTarget（
＆lt; div className =＆＃34; day＆＃34;风格= {{
backgroundColor：canDrop？ ＆＃39;＃EEE＆＃39; ：＆＃39;＆＃39;
}＆gt;
＆lt; span className =＆＃34; dayDetails＆＃34;＆gt;
＆LT;跨度＆GT;星期一＆LT; /跨度＆GT;
＆lt; span＆gt; 1月1日＆lt; / span＆gt;
＆lt; / span＆gt;
＆LT; / DIV＆GT;
）;
}
}
export default DropTarget（ItemTypes.EVENT，calTarget，collect）（customCal）;
＆LT; /代码＆GT;＆LT; /预＆GT;
＆lt; p＆gt;以及加载这两个组件的父组件。
customCalLoader.js＆lt; / p＆gt;
＆lt; pre＆gt;＆lt; code＆gt;导入React，{Component}来自＆＃39;反应＆＃39 ;;
import＆＃39; ./ customCal.css＆＃39 ;;
从＆＃39; ./ customCal＆＃39;中导入CustomCal;
从＆＃39; ./ externalEvents＆＃39;中导入ExternalEvents;
从＆＃39; react-dnd＆＃39;导入{DragDropContext，DragDropContextProvider};
从＆＃39; react-dnd-html5-backend＆＃39;中导入HTML5Backend;
class customCalLoader扩展Component {
render（）{
回来（
＆lt; div className =＆＃34; customCal__Loader＆＃34;＆gt;
＆lt; div className =＆＃34; event__box＆＃34;＆gt;
＆lt; ExternalEvents name =＆＃34; Nike＆＃34; /＆GT;
＆lt; ExternalEvents name =＆＃34; RT＆＃34; /＆GT;
＆lt; ExternalEvents name =＆＃34; Jaboog＆＃34; /＆GT;
＆LT; / DIV＆GT;
＆lt; div className =＆＃34; customCal__main＆＃34;＆gt;
＆lt; CustomCal /＆gt;
＆lt; / div＆gt;
＆LT; / DIV＆GT;
）
}
}
export default DragDropContext（HTML5Backend）（customCalLoader）;
＆LT; /代码＆GT;＆LT; /预＆GT;
＆lt; p＆gt;现在当前拖动工作并且当成功地悬停在放置目标上时，放置目标颜色改变，因此拖放工作正在工作，但是现在我想要的是当我拖动元素时并将其放在dropTarget上，我希望它坚持放下目标，我如何在React Dnd中执行此操作？ ＆LT; / p为H.
＆lt; p＆gt;我想实现＆lt; a href =＆＃34; https://fullcalendar.io/docs/external-dragging-demo" rel =＆＃34; nofollow noreferrer＆＃34;＆gt; this＆lt; / a＆gt; （这是在jQuery中），我如何在React Dnd中实现这一点？ ＆LT; / p为H.