一旦载入文件的光标进入浏览器窗口,就可以突出显示放置区域,就像Gmail一样。但我不能让它工作,我觉得我只是错过了一些非常明显的东西。
我一直在努力做这样的事情:
this.body = $('body').get(0) this.body.addEventListener("dragenter",this.dragenter,true) this.body.addEventListener("dragleave",this.dragleave,true)`
但是,当光标移动并移出BODY以外的元素时,它会触发事件,这是有道理的,但绝对不起作用。我可以把一个元素放在一切之上,覆盖整个窗口并检测出来,但这将是一个可怕的方法。
我失踪了什么
解决方法
我解决了一个超时(不是吱吱声干净,但工作):
var dropTarget = $('.dropTarget'),html = $('html'),showDrag = false,timeout = -1; html.bind('dragenter',function () { dropTarget.addClass('dragging'); showDrag = true; }); html.bind('dragover',function(){ showDrag = true; }); html.bind('dragleave',function (e) { showDrag = false; clearTimeout( timeout ); timeout = setTimeout( function(){ if( !showDrag ){ dropTarget.removeClass('dragging'); } },200 ); });
我的例子使用jQuery,但并不是必需的。以下是发生了什么的总结:
>在html(或body)元素的拖放和拖动上设置一个标志(showDrag)为true。
>拖拽将标志设置为false。然后设置一个短暂的超时时间来检查该标志是否仍然为false。
>理想情况下,在设置下一个之前,请先跟踪超时并清除。
这样,每个拖拽事件都给DOM足够的时间来重新设置一个新的拖动事件来重置标志。我们关心的真正的最后拖车将会看到旗帜仍然是假的。