Firefox中draggable的诡异问题

html5的属性draggable,有了它实现拖拽非常简单。

 在chrome上很轻易的实现了拖拽的效果,可是到了firefox中却无法使用。 debug 的现象是无法进入drop函数中。

代码如下:

$('.dragbox').on('dragstart', '.draglist', function(ev){
  ev.originalEvent.dataTransfer.effectAllowed = "move";
  ev.originalEvent.dataTransfer.setDragImage(ev.target, 0, 0);
  eleDrag = ev.target;
  return true;
}).on('selectstart', '.draglist', function(ev){
  return false;
}).on('dragend', '.draglist', function(ev){
  ev.originalEvent.dataTransfer.clearData("text");
  eleDrag = null;
  return false
});

$('#dustbin').on('dragover',function(ev) {
    ev.preventDefault();
    return true;
});

$('#dustbin').on('dragenter', function(ev) {
    this.style.color = "#ffffff";
    return true;
});
$('#dustbin').off('drop').on('drop',function(ev) {
    if (eleDrag) {
        eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱';
        eleDrag.parentNode.removeChild(eleDrag);
    }
    this.style.color = "#000000";
    return false;
});

但奇怪的是,网上copy的别人代码做的一个demo,firefox上没有问题,能正常拖拽。 

通过比较,最终发现需要在 dragstart函数中加入  

ev.originalEvent.dataTransfer.setData("text", ev.target.innerHTML);

至于setData设置什么数据没有关系,只要在dragstart中调用一次该方法后,便可以正常拖拽。

firefox版本: 39.0

Firefox中draggable的诡异问题

你可能感兴趣的:(JavaScript,html5,firefox,draggable)