到目前为止，我从来没有真正需要使用任何拖动功能，所以让我向您介绍一下我到目前为止的发现：
- 拖动事件是在用户拖动对象时发生的事件。这是“正确的”操作系统拖动，例如：hiliting 一些文本并拖动它，甚至从浏览器外部拖动一些东西。
- 据我所知，在拖动时，不会触发其他浏览器事件。（例如，onmouseover 会被忽略）。唯一有效的事件是拖动事件。
- 在所有现代浏览器中，onDragEnter 和 onDragOver 似乎都可以工作……但 Firefox 缺少“onDragLeave”。
- 对于丢弃，FF 使用“onDragDrop”，而 IE 和其他人使用“onDrop”，而 Safari 似乎不支持它。
- 事件似乎只适用于“可放置”元素，如 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>