Question

到目前为止，我从未真正需要使用任何拖动功能，所以让我填写一下我到目前为止所发现的内容：

拖动事件是用户拖动对象时发生的事件。这是“适当的”操作系统拖动，例如：hiliting一些文本并拖动它，甚至从浏览器外部拖动一些东西。
在拖动时，据我所知，不会触发任何其他浏览器事件。（例如，忽略onmouseover）。唯一有效的事件是拖拽事件。
在所有现代浏览器中，onDragEnter和onDragOver似乎都有用......但是firefox缺少“onDragLeave”。
对于丢弃，FF使用“onDragDrop”，而IE和其他人使用“onDrop”，而Safari似乎不支持它。
事件似乎只适用于“droppable”元素，如textarea和text。在其他元素上只有一些事件有效。
我甚至不想浏览每个浏览器的各种其他怪癖。
关于这些事件的记录非常少。

是的，我必须使用实际的拖放，并且无法模拟它。

我的问题：

有没有办法在FF中检测“ondragleave”或类似内容？
有没有办法在Safari中检测“ondragdrop”或类似内容？
您有什么要添加的关于拖放的内容吗？

这是一个快速而肮脏的模板，演示了拖放事件：

<script>
    addEvent = function(obj, eventname, fn){
        if (document.addEventListener) obj.addEventListener(eventname, fn, false);
        else obj.attachEvent('on'+eventname, fn);
    }

    window.onload = function(){
        var logger = document.getElementById("logger");
        var log = function(str){ logger.value = str + logger.value; }

        //log a variety of drag events for the textarea
        var obj = document.getElementById("tarea");
        var events = ["dragenter","dragover","dragout","dragleave","dragdrop","drop"];
        for (var i=0; i<events.length; i++){
            (function(event){//create a closure to remove variable scope
                addEvent(obj, event, function(){ log("textarea: " + event + "\n"); });
            })(events[i]);
        }

        //log events on the div
        obj = document.getElementById("div");
        events = ["mouseover","mouseout","mouseup","mousedown","click","dblclick",
                "dragenter","dragover","dragout","dragleave","dragdrop","drop"];
        for (var i=0; i<events.length; i++){
            (function(event){//create a closure to remove variable scope
                addEvent(obj, event, function(){ log("div: " + event + "\n"); });
            })(events[i]);
        }
    }
</script>
Life's a drag when doing cross browser stuff.<br><br>
<div id="div" style="width: 100px; height: 100px; background: green; float: left;">
</div>
<textarea id="tarea" style="width: 100px; height: 100px; float: left; margin: 0px 5px;">
</textarea>

<textarea id="logger" style="width: 200px; height: 400px; float: left;">
</textarea>

Answer 1

我找到了一种通过事件委派处理onDragLeave的方法。

只需添加一个事件即可监控整个文档中的“dragover”。当事件源成为您有问题的元素时，设置一个标志，一旦事件源不再是该元素，就触发“dragleave”事件。

注意：

需要进行修改，以便“e.source == obj”实际上是“obj.childOf（e.source）”...因为源元素可能是相关对象的后代。
需要事件处理框架来确定基于浏览器的“源”。

不幸的是，看起来Safari缺乏“ondrop”无法修复......它根本就不会被解雇。

如何在FF（以及所有浏览器）中实现“dragleave”：

var setOnDragLeave = function(obj, fn){
    var on=false;
    var dragover = function(e){
        if (on){
            if (e.source!=obj){
                on = false;
                e.eventname = "dragleave";
                fn.call(obj, e);
            }
            return;
        }else{
            if (e.source==obj) on = true;
            return;
        }
    }
    addEvent(document.documentElement, "dragover", dragover);
}
setOnDragLeave(obj, function(e){ logEvent(e); });

我真诚地希望这个星球上的其他人可以使用这个...

Answer 2

好文章。我也在寻找Safari中的ondrop / ondragdrop。但是，“内部”拖放情况可能有一种解决方法，即拖动源和放置目标位于同一文档中。

IE支持拖动源元素上的事件ondragstart，ondrag和ondragend。 Safari 3也可以解雇它们。 Firefox3触发ondrag和ondragend，但不是ondragstart（尽管文档表明它应该）。无论如何，根据您的情况，您可以使用ondragend来检测拖放操作何时完成。

Answer 3

Firefox似乎将“dragleave”事件称为“dragexit”。刚刚学会了这个。它有效。

浏览器“拖放”事件：任何人都可以填空吗？

3 个答案: