自定义 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 的插入和移除可以分别放在 dragstartdragend

参考链接

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

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