Html5 Drag 使用问题_datatransfer.setdragimage自定义宽度失效-优快云博客

本文链接：https://blog.youkuaiyun.com/xibao31/article/details/39696005

本文探讨了在使用HTML5 Drag时遇到的兼容性问题，包括数据传输、z-index层级更改触发的dragend事件、dragstart事件后禁用鼠标事件等，并提供了相应的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于Html5 Drag使用时遇到的兼容性和使用可能产生分歧的问题

1. dataTransfer.setData()只能用在dragstart 事件中，在webkit 和ie的浏览器下 dataTransfer.getData()只能用在drop事件中，其他任何事件使用时，得到的都是空值。

2.当dragstart事件触发的回调中，如果改变了drag对象所在的盒模型中的zindex层级，使得drag对象被压到某个对象下面，或者drag对象display：none，都会立刻触发dragend事件（除firefox浏览器），导致这个拖拽行为终止。

$('dragobject').on('dragstrat',function(e){
	//以下会触发dragend事件，同理加带有类似css的classname也会
        $(this).hide();
	$(this).css('z-index',-1);
        //透明则不会触发
	$(this).css('opacity', 0);
});

如果非要处理类似的效果，可以用setTimeout来延后，就没有这个问题了。

$('dragobject').on('dragstrat',function(e){
	var $this = $(this);
        setTimeout(function(){
            $(this).hide();
 	    $(this).css('z-index',-1);
        },0);

});

3.dataTransfer.setDragImage(), 给拖拽添加一个随鼠标移动的ghost image，ie10， ie11不支持，会显示默认的效果，要去掉这个效果的方法就是把目标设置为display：none

4.如果两个div紧挨着相邻，拖拽元素后在两者之间来回晃动，会触发dragenter 和dragleave事件，但是触发顺序是先触发进入下一个元素的dragenter事件，再出触发移出前一个元素的dragleave事件。

5.拖拽滚动，拖动一个物体到窗口边缘，滚动条会随着滚动， firefox不支持，只有window边缘或者iframe边缘才会触发这个特效，也可以自己使用dragover事件模拟。

代码可以参考drag_to_scroll_reloaded-0.5-fx.xpi插件，减压后看dragtoscrolloverlay.xul文件

6.触发dragstart事件后，任何mouse事件将被禁用。