拖拽操作

文章根据自己实际操作及理解编写，更加完善的文档请查阅官方文档 (opens new window)

相关API

draggable

• 用于标识元素是否允许使用拖动

  • true，表示元素可以被拖动
  • false，表示元素不可以被拖动

onDrag

• 拖拽元素或选中的文本时持续触发

onDragStart

• 开始拖拽时触发一次

onDragEnd

• 拖拽结束出发一次

onDragEnter

• 当拖拽元素或选中的文本到一个可释放目标时触发一次

onDragOver

• 当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）

onDragLeave

• 当拖拽元素或选中的文本离开一个可释放目标时触发一次

onDrop

• 当元素或选中的文本在可释放目标上被释放时触发

• 由于onDragOver用了节流(100ms执行一次),所以使用此api需要配合onDragOver配合使用,具体代码如下

<div
  onDragOver={(e) => {
    // 阻止冒泡-必加
    e.preventDefault();
  }}
  onDrop={() => {
    console.log("onDrop事件触发");
  }}
></div>

设置拖拽反馈图像

拖动时自定义图标可以使用该方法

当拖拽发生时，会生成拖拽目标的一个半透明图像（触发"dragstart (en-US)" 事件的元素），并在拖拽过程中跟踪鼠标指针。这个图像是自动创建的，所以你不需要自己创建它。但是，你可以使用 setDragImage() 方法来自定义拖拽反馈图像。

event.dataTransfer.setDragImage(image, xOffset, yOffset);

这三个参数都是必要的。第一个是图像的引用。这个引用通常是一个 <img>元素，但也可以是<canvas>或任何其他元素。生成的反馈图像就是该图像在屏幕上的样子，以图像原始的大小绘制。setDragImage() 方法的第二、三个参数是图像位置相对于鼠标指针位置的偏移量。

实例详解

下面官方给的例子

function dragWithCustomImage(event) {
  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
  canvas.width = canvas.height = 50;

  var ctx = canvas.getContext("2d");
  ctx.lineWidth = 4;
  ctx.moveTo(0, 0);
  ctx.lineTo(50, 50);
  ctx.moveTo(0, 50);
  ctx.lineTo(50, 0);
  ctx.stroke();

  var dt = event.dataTransfer;
  dt.setData('text/plain', 'Data to Drag');
  dt.setDragImage(canvas, 25, 25);
}

上述方法拖拽的过程中可能实现不了我们预期的效果，因为拖拽是瞬间的事情，而绘制拖拽的图标需要时间，我们开始拖拽的时候还没有图标还没有绘制完成，拖拽图标就不会改变；

优化方案

先准备好会在所需图标，拖拽开始的时候直接使用即可

  const createElementImg = () => {
    // var imgNode = document.createElement( 'img' );
    const imgNode: any = new Image();
    imgNode.src = dragIcon;
    dragIconRef.current = imgNode;
  }

  /**
   * 开始拖拽callback
   */
  const handleDragStartCallback = (type: any, event: any, info: any) => {
    event.dataTransfer.setDragImage(dragIconRef.current, 19, 50);
    console.log('开始拖拽');
  };