如何解决以编程方式启动 React Draggable 拖动
我正在尝试使用 ReactJS Draggable
组件来实现跨堆叠上下文的拖放效果。我最初的灵感是这个CodePen example。当然,这不是 React,但我正在尝试使用在可滚动 div 之外创建 DOM 元素的基本策略,然后在拖动开始时将其定位在拖动开始位置上。这或多或少是有效的,但我无法解决的最后一个问题是将拖动开始事件(由滚动 div 内的组件上的鼠标移动事件触发)传输到我的可拖动元素,该元素放置在滚动div。
这是可拖动元素的定义:
<Draggable
position={props.dragState.position}
onDrag={onDrag}
onStop={dragStop}
ref={draggableRef}>
<div ref={draggedElementRef}
style={{
zIndex: 1000,visibility: { isVisible },display: "inline-block",backgroundColor: "white",padding: 10
}}>
{props.dragState.dragText}
</div>
</Draggable>
这里是我试图触发拖动的地方,但它不起作用:
if(props.dragState.dragging) {
if(!draggingNow){
setDraggingNow(true);
console.log("TRANSFER DRAG EVENT HERE");
draggableRef.current.onDragStart(
props.dragState.startDragEvent,{
node: draggedElementRef.current,x: props.dragState.position.x,y: props.dragState.position.y,deltaX: 0,deltaY: 0,lastX: props.dragState.position.x,lastY: props.dragState.position.y
});
}
} else {
if(draggingNow){
setDraggingNow(false);
}
}
在第二个块中,props.dragState.startDragEvent
目前只是对触发拖动操作的组件接收到的 onMouseMove 事件的引用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。