Event drag-and-drop browser: can anyone fill in the blanks?

Question

I have never had to use drag and drop functions so far, so let me fill you with what I have discovered so far:

• Drag and drop events are events that occur when a user drags an object. This is the “correct” dragging and dropping of the OS, for example: hiliting some text and dragging it or even dragging something from outside the browser.
• When dragging, as far as I can tell, no other browser events will be fired. (e.g. onmouseover is ignored). The only events that work are drag and drop events.
• OnDragEnter and onDragOver work in all modern browsers ... but firefox lacks "onDragLeave".
• To remove FF, it uses "onDragDrop", while IE and others use "onDrop", while Safari does not support it.
• Events seem to work only with droppable elements such as textarea and text. On other elements, only some events work.
• Various other quirks for every browser that I don’t even want to navigate.
• These events are not well documented.

Yes, I have to use the actual drag + drop and cannot simulate it.

My questions:

• Is there a way to detect "ondragleave" or the like in FF?
• Is there a way to detect "ondragdrop" or similar in Safari?
• Do you have anything 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 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

I found a way to handle onDragLeave through event delegation.

Just add a dragover tracking event to the entire document. When the event source becomes your element, set the flag, and as soon as the event source is no longer that element, fire the dragleave event.

Note:

• It will be necessary to change so that "e.source == obj" is actually "obj.childOf (e.source)" ... since the source element may be a descendant of the object in question.
• The event-handling infrastructure is required to determine which "source" is browser-based.

Unfortunately, it seems that Safari's lack of "ondrop" cannot be fixed ... it just never starts.

How to achieve dragleave in FF (well, all browsers):

 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); }); 

I sincerely hope that someone else on this planet can use this ...

Answer 2

Good article. I am also looking for the equivalent of ondrop / ondragdrop in Safari. However, there is a possible workaround for the "internal" drag case, i.e. The drag source and return target are in the same document.

IE supports ondragstart, ondrag, and ondragend events in a drag source element. Safari 3 works too. Firefox3 runs ondrag and ondragend, but not ondragstart (although the documentation suggests that it should). In either case, depending on your scenario, you can use ondragend to detect when the drag operation is complete.

Answer 3

Firefox implements the dragleave event as dragexit, it seems. Just found out about it now. And it works.