I've never really had the need to use any drag functions until now, so let me fill you in on what I've discovered so far:
- Drag events are events that take place when the user is dragging an object. This is "proper" OS dragging, eg: hiliting some text and dragging it, or even dragging in something from outside of the browser.
- While dragging, as far as I can tell, no other browser events will be fired. (onmouseover is ignored, for example). The only events that work are drag events.
- In all modern browsers, onDragEnter and onDragOver appear to work... but firefox lacks "onDragLeave."
- For dropping, FF uses "onDragDrop" while IE and others use "onDrop" while Safari doesn't appear to support it.
- Events only seem to work on "droppable" elements, like textarea and text. On other elements only some events work.
- Various other quirks for each browser that I don't even want to go over.
- There is very little documented about these events.
Yes, I must use actual drag+drop, and cannot simulate it.
My questions:
- Is there a way to detect "ondragleave" or similar in FF?
- Is there a way to detect "ondragdrop" or similar in Safari?
- Do you have anything to add about Drag + Drop?
Here's a quick and dirty template demonstrating drag and drop events:
<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>