事件传播,覆盖和拖放事件 [英] Event propagation, overlay and drag-and-drop events
问题描述
当用户将文件拖到窗口上时,我想在视口上覆盖一个div。
I want to overlay a div over the viewport when the user drags a file onto the window.
但是,我遇到了事件传播的问题。当我将叠加层设置为 display:block
时,它会显示一个 dragleave
事件,然后另一个 dragenter
,然后再次 dragleave
,所以它总是处于拖后状态。当然,我在事件对象上调用 e.stopPropagation()
和 e.preventDefault()
However, I'm having trouble with the event propagation. When I set the overlay to display: block
it appears to fire off a dragleave
event and then another dragenter
and then another dragleave
again, so it's always in a post-dragleave state. Of course I call e.stopPropagation()
and e.preventDefault()
on the event object, but it doesn't seem to make a difference.
在窗口上拖动某个东西时,console.log()输出:
The console.log() output when you drag something over the window:
dragenter
dragenter
dragleave
dragenter
dragleave
css。默认情况下, #overlay
设置为 display:none
,但会显示 body
有
dragenter
类:
The css. #overlay
is set to display: none
by default, but will show if body
has the dragenter
class:
body {
position: absolute;
height: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#overlay {
position: absolute;
height: auto;
width: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(bg.png) repeat-x top right, url(bg.png) repeat-x bottom left, url(bg.png) repeat-y top right, url(bg.p
ng) repeat-y bottom left;
display: none;
}
body.dragenter #overlay {
display: block;
}
javascript。在dragenter上添加'dragenter'类,并在dragleave上删除它:
The javascript. Add the 'dragenter' class on dragenter and removes it on dragleave:
$(document).on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
console.log('dragenter');
$(document.body).addClass('dragenter');
});
$(document).on('dragleave', function (e) {
e.stopPropagation();
e.preventDefault();
console.log('dragleave';
$(document.body).removeClass('dragenter');
});
html:
<body>
<div id="overlay">...</div>
...
</body>
$ b b
推荐答案
感谢Scottux,让我走上正确的轨道。
Thanks to Scottux, that led me onto the right track.
我不得不隐藏#dragOverlay默认情况下用 display:none ,并显示在此事件
Only problem was it also covered up the rest of the page, so none of the elements or inputs were clickable. I had to hide #dragOverlay by default with "display: none" and display it on this event
// Display an overlay when dragging a file over
$('*:visible').live('dragenter', function(e) {
e.stopPropagation();
$('body').addClass('drag-enter');
});
这篇关于事件传播,覆盖和拖放事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!