开发者

Javascript Drag&Drop: ondragleave working solution?

Is there any working solution for ondragleave?

.addEventListener('ondragleave',function(){
console.log('n开发者_C百科othing');
});

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

Thanks ;)


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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜