以编程方式启动 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 (将#修改为@）

drag-and-drop reactjs reactjs reactjs reactjs