自定义 draggable 拖拽样式

使用场景

发生拖动时，浏览器会基于元素自动生成半透明图。但是业务可能需要修改样式/图的透明度，这时候就需要自定义样式

api

查找 MDN 的 api 后可以发现，DataTransfer.setDragImage() 可以修改拖拽图片，但是介绍说是 img 或者 canvas

图像通常是一个 <image> 元素，但也可以是<canvas> 或任何其他图像元素

经实验，实际上该 api 可以用任意元素

使用虚拟 DOM

虽然实验是可以用任意元素，但如果使用虚拟 DOM 会发现拖拽图片是无效的，因为规范规定

Otherwise, image should be a visible node and the drag image will be created from this.

所以使用虚拟 DOM 必须需要插入 DOM 树中，并在浏览器中可见
但是大部分情况下我们并不需要显示该虚拟 DOM，于是需要方案可以隐藏该 DOM，但是对浏览器可见
经试验，可以设置元素样式为

position: absolute;
left: -100px; /* 或者 top */

此时，该元素对用户不可见，但是对浏览器可见
ps. 虚拟 DOM 的插入和移除可以分别放在 dragstart 和 dragend

参考链接

Setting a custom ghost image when using HTML5 drag and drop
DataTransfer.setDragImage()

自定义 draggable 拖拽样式

原文：https://www.cnblogs.com/NKnife/p/14539313.html