CODEWITHSUNDEEP
javascripthtml
Somebody
Somebody

Reputation: 9645

Javascript Drag&Drop: ondragleave working solution?

Is there any working solution for ondragleave?

.addEventListener('ondragleave',function(){
console.log('nothing');
});

This doesn't work. I'm doing something wrong?

Thanks ;)

Upvotes: 1

Views: 4158

Answers (2)

Linus Swälas
Linus Swälas

Reputation: 130

The previous answer is incorrect, ondragleave and ondragend are two different events and they are fired on different elements. What brenjt might have meant was to try the ondragexit event which is what ondragleave was called in Mozilla < 3.5.

ondragleave is fired when a drag goes out from an element that can receive a drop event.

ondragend is fired on the element that the ondragstart fired on.

See for example: https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations

The reason for your ondragleave not firing might be

.addEventListener('ondragleave',function(){

which should probably be

.addEventListener('dragleave',function(){

In the docs I've read, for example at http://www.quirksmode.org/js/events_advanced.html the event is specified without the "on" when using .addEventListener().

PS. As a side note, Mozilla 22 also seem to fire the ondragleave event after some timeout hovering over a droppable element. DS.

Upvotes: 1

brenjt
brenjt

Reputation: 16297

Try

.addEventListener ("dragend",function(){
    console.log('nothing');
});

EDIT: It depends on what browser you are using. Info pulled from http://help.dottoro.com/ljsluknm.php. Different browsers use different event names.

var source = document.getElementById ("source");
var target = document.getElementById ("target");
            if (source.addEventListener) {  // all browsers except IE before version 9
                    // Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
                source.addEventListener ("dragstart", DumpInfo, false);
                    // Firefox before version 3.5
                source.addEventListener ("draggesture", DumpInfo, false);
                    // Firefox, Google Chrome, Safari, Internet Exlorer
                source.addEventListener ("drag", DumpInfo, false);
                    // Firefox, Google Chrome, Safari, Internet Exlorer
                source.addEventListener ("dragend", DumpInfo, false);

                    // Firefox, Google Chrome, Safari, Internet Exlorer
                target.addEventListener ("dragenter", DumpInfo, false);
                    // Firefox, Google Chrome, Safari, Internet Exlorer
                target.addEventListener ("dragover", DumpInfo, false);
                    // Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
                target.addEventListener ("dragleave", DumpInfo, false);
                    // Firefox
                target.addEventListener ("dragexit", DumpInfo, false);
                    // Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
                target.addEventListener ("drop", DumpInfo, false);
                    // Firefox before version 3.5
                target.addEventListener ("dragdrop", DumpInfo, false);
            }
            else {
                if (source.attachEvent) {   // IE before version 9
                    source.attachEvent ("ondragstart", DumpInfo);
                    source.attachEvent ("ondrag", DumpInfo);
                    source.attachEvent ("ondragend", DumpInfo);

                    target.attachEvent ("ondragenter", DumpInfo);
                    target.attachEvent ("ondragover", DumpInfo);
                    target.attachEvent ("ondragleave", DumpInfo);
                    target.attachEvent ("ondrop", DumpInfo);
                }
            }

Upvotes: 1

Related Questions