Javascript拖放:ondragleave工作解决方案

Javascript Drag&Drop: ondragleave working solution?

本文关键字:工作 解决方案 ondragleave 拖放 Javascript      更新时间:2023-09-26

是否有任何工作解决方案的ondragleave?

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

这行不通。我做错了什么?

谢谢,)

Try

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

编辑:这取决于你使用什么浏览器。信息从http://help.dottoro.com/ljsluknm.php。不同的浏览器使用不同的事件名称。

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

前面的答案是不正确的,ondragleave和ondragend是两个不同的事件,它们在不同的元素上被触发。brenjt的意思可能是尝试ondragexit事件也就是Mozilla中ondragleave的名称<3.5 .

ondragleave会在一个可以接收放置事件的元素的拖放结束时触发。

ondragend在ondragstart所触发的元素上被触发。

参见示例:https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations

你的ondragleave不触发的原因可能是

.addEventListener('ondragleave',function(){

应该是

.addEventListener('dragleave',function(){

在我读过的文档中,例如在http://www.quirksmode.org/js/events_advanced.html中,当使用. addeventlistener()时,事件指定没有"on"。

p。顺便说一句,Mozilla 22似乎也会在悬停在可拉放元素上一段时间后触发ondragleave事件。DS。