自定义 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()


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM