ʞɔı*_*ɔıu 12 javascript css jquery html5 javascript-events
当用户将文件拖到窗口上时,我想在视口上叠加div.
但是,我遇到了事件传播的问题.当我设置的叠加display: block它似乎火了一个dragleave事件,然后又dragenter另,然后dragleave再次,所以它总是在后dragleave状态.当然我打电话e.stopPropagation()和e.preventDefault()事件对象,但它似乎没有什么区别.
在窗口上拖动某些内容时,console.log()输出:
dragenter
dragenter
dragleave
dragenter
dragleave
css.默认#overlay设置为display: none,但会显示是否body有dragenter类:
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上删除它:
$(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>
您的叠加层会占用整个文档大小,当您拖入时,它会填满其空间,鼠标会被有效地从身体中取出,现在位于叠加层上方.这会触发mouseleave/mouseenter循环.为了实现您的目标,您可能希望将事件绑定到具有较低z-index的可见叠加层上具有高z-index的透明叠加层.这将使事件保持在最高元素中.
例:
http://jsfiddle.net/scottux/z7yaB/
感谢 Scottux，让我走上了正确的道路。
唯一的问题是它还覆盖了页面的其余部分，因此没有任何元素或输入是可单击的。我必须默认使用“ display:none ”隐藏#dragOverlay并在此事件中显示它
// Display an overlay when dragging a file over
$('*:visible').live('dragenter', function(e) {
e.stopPropagation();
$('body').addClass('drag-enter');
});
| 归档时间： |
|
| 查看次数： |
7275 次 |
| 最近记录： |