到目前为止,我从来没有真正需要使用任何拖动功能,所以让我填写你到目前为止我发现的内容:
>拖动事件是用户拖动对象时发生的事件.这是“适当的”OS拖动,例如: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",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>
解决方法
我找到了一种通过事件委托来处理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);
- }
- setOnDragLeave(obj,function(e){ logEvent(e); });
我真诚地希望这个星球上的其他人可以使用这个……