关于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事件将被禁用。