js拖拽时取消半透明元素

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

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

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

也可以使用不在文档中的图像和画布。这种技术在使用 canvas 元素绘制自定义的拖拽反馈图像时非常有用，如下面的例子：

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);
}


element.ondragstart = event=>{
    dragWithCustomImage(event);
}

element.ondrag = event=>{
    dragWithCustomImage(event);
}

element.ondragend = event=>{
    //拖拽松开鼠标时，要执行的操作事务代码
}

在这个例子中，我们做了一个是画布的拖拽图像。当画布宽 50 像素，高 50 像素时，我们使用一半的偏移量（25 和 25），这样鼠标指针即为图像中心。

图片拖拽透明阴影不妨添加css样式pointer-events试试：

pointer-events: none;

原文：https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations