HTML5的拖放，在Firefox中没有触发的“拖放”事件

尽管仔细阅读了Mozilla开发者网络文档，以及我在堆栈溢出中找到的任何答案，仍然无法获得HTML5在Firefox中的拖放工作。我在AngularJS应用程序中使用它。在Chrome和Internet Explorer中一切正常，但Firefox（v33.1）无法正常运行。我宁愿不必诉诸使用jQueryUI。HTML5的拖放，在Firefox中没有触发的“拖放”事件

希望有人能在这里发现我失踪的东西。正如你在下面的代码中看到的那样，我已经为每个事件处理程序添加了一些console.log（）调用，以检查每个事件是否按预期发射。在Firefox中，除“drop”事件外，所有事件都会被触发。

这里是我的代码的简化版本：

var assignEvents = function() { 
    var rows = angular.element('.row'); 
    if (self.rows.length > 0) { 
    // event handlers for rows 
    angular.forEach(self.rows, function(row, key) { 
     angular.element(row) 
     // clear any existing bindings 
     .off('dragstart') 
     .off('dragenter') 
     .off('dragover') 
     .off('dragleave') 
     .off('drop') 
     .off('dragend') 
     // add bindings 
     .on('dragstart', handleDragStart) 
     .on('dragenter', handleDragEnter) 
     .on('dragover', handleDragOver) 
     .on('dragleave', handleDragLeave) 
     .on('drop', handleDrop) 
     .on('dragend', handleDragEnd); 
    }); 
    } 
}; 

// event handlers 

var handleDragStart = function(e) { 
    console.log("dragStart"); 
    e.stopPropagation(); 
    this.style.opacity = 0.4; 
    e.originalEvent.dataTransfer.setData('text/plain', this.id); 
    e.originalEvent.dataTransfer.effectAllowed = 'link'; 
    e.originalEvent.dataTransfer.dropEffect = 'link'; 
}; 

var handleDragEnter = function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    console.log("dragEnter"); 
    return false; 
}; 

var handleDragOver = function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    console.log("dragOver"); 
    return false; 
}; 

var handleDragLeave = function(e) { 
e.preventDefault(); 
e.stopPropagation(); 
console.log("dragLeave"); 
return false; 
}; 

var handleDrop = function(e) { 
    console.log("drop"); 
}; 

var handleDragEnd = function(e) { 
    console.log("dragEnd"); 
    e.stopPropagation(); 
    e.preventDefault(); 
    this.style.opacity = 1; 
}; 

assignEvents();

来源

2014-12-02 Jeff Fohl

哦，看来，罪魁祸首是effectAllowed和dropEffect在handleDragStart()功能的设定。我不确定为什么这些设置禁用Firefox中的放置事件。因为我主要是为了它们的视觉效果而使用它们（在Chrome中，光标将根据使用的效果而改变），在我的情况下，删除这些行可以解决我的问题。

编辑：其实，它出现在Firefox中，如果你决定要设置的effectAllowed和dropEffect在dragstart事件处理程序，您还需要设置dropEffect在dragenter和dragover事件处理程序。如果不这样做将阻止drop事件触发。

来源

2014-12-02 18:41:56

您还可以使用dragg落aculo脚本。它会为您提供很多功能。我已经在我的网站上申请。

<div id="drag_demo_2" style="width:100px; height:100px; background:#fff85d; border:1px solid #333;"></div> 
    <script type="text/javascript"> 
    new Draggable('drag_demo_2', { revert: true, snap: [40, 40] }); 
    </script>

参考：http://madrobby.github.io/scriptaculous/draggable/

来源

2014-12-02 05:30:43 saqib

感谢saqib，但我不想将任何新库添加到除Angular以外的应用程序。 – 2014-12-02 16:44:09

对我来说，只有在dragstart事件处理程序中添加了下面的代码后才能工作 e.dataTransfer.setData（“text”，“somedata”）;

来源

2018-01-24 10:57:37 Heshan

HTML5的拖放，在Firefox中没有触发的“拖放”事件

回答

相关问题