我终于找到了我满意的解决方案。我实际上找到了几种方法来做自己想做的事,但是没有一种方法能像当前解决方案一样成功。在一种解决方案中,由于在
#dropzone元素上添加/删除了边框,我经常出现闪烁现象。如果将鼠标悬停在浏览器之外,则不会删除它。
无论如何,我最好的hacky解决方案是这样的:
var dragging = 0;attachEvent(window, 'dragenter', function(event) { dragging++; $(dropzone).addClass('drag-n-drop-hover'); event.stopPropagation(); event.preventDefault(); return false;});attachEvent(window, 'dragover', function(event) { $(dropzone).addClass('drag-n-drop-hover'); event.stopPropagation(); event.preventDefault(); return false;});attachEvent(window, 'dragleave', function(event) { dragging--; if (dragging === 0) { $(dropzone).removeClass('drag-n-drop-hover'); } event.stopPropagation(); event.preventDefault(); return false;});效果很好,但是Firefox中出现了问题,因为Firefox是双重调用的,
dragenter所以我的计数器关闭了。但是,这并不是一个非常优雅的解决方案。
然后我偶然发现了一个问题:在窗口外拖动时如何检测Firefox中的dragleave事件
因此,我接受了答案并将其应用于我的情况:
$.fn.dndhover = function(options) { return this.each(function() { var self = $(this); var collection = $(); self.on('dragenter', function(event) { if (collection.size() === 0) { self.trigger('dndHoverStart'); } collection = collection.add(event.target); }); self.on('dragleave', function(event) { setTimeout(function() { collection = collection.not(event.target); if (collection.size() === 0) { self.trigger('dndHoverEnd'); } }, 1); }); });};$('#dropzone').dndhover().on({ 'dndHoverStart': function(event) { $('#dropzone').addClass('drag-n-drop-hover'); event.stopPropagation(); event.preventDefault(); return false; }, 'dndHoverEnd': function(event) { $('#dropzone').removeClass('drag-n-drop-hover'); event.stopPropagation(); event.preventDefault(); return false; }});这是干净优雅的,似乎可以在到目前为止我测试过的所有浏览器中使用(尚未测试IE)。



