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.
精彩评论