[英]jQuery drop zone effect
我试图这样做,当您将文件拖入浏览器时,会出现一个拖放区,而当您离开浏览器(或拖放文件)时,该拖放区效果将消失。
但是,似乎dragover 和dragleave 事件并没有像我想要的那样触发,因为当您将文件拖入浏览器时,拖放区将永远显示和隐藏。
JSFiddle http://jsfiddle.net/3vxgtkr0/
HTML:
<div class="drop-window"> <div class="drop-window-content"> <h3>Drop files to upload</h3> </div> </div>
JS:
var dropZone = $(document);
var dropWindow = $('.drop-window');
function onDragOver (e) {
dropWindow.show();
}
function onDragEnter (e) {
}
function onDragLeave (e) {
dropWindow.hide();
}
function onDrop (e) {
e.preventDefault();
}
dropZone.on('dragover', onDragOver);
dropZone.on('dragenter', onDragEnter);
dropZone.on('dragleave', onDragLeave);
dropZone.on('drop', onDrop);
除了显示/隐藏元素,您可以简单地对其应用一个类,CSS 可以进行颜色更改/虚线边框等以获得相同的效果,并且不会在鼠标下方显示额外的元素来导致故障。 像这样的东西:
var dropZone = $(document);
function onDrop (e) {
e.preventDefault();
$(this).removeClass('dragover');
// do things
}
dropZone.on('dragover', function(){ $(this).addClass('dragover'); });
dropZone.on('dragleave', function(){ $(this).removeClass('dragover'); });
dropZone.on('drop', onDrop);
然后使用 .dragover 的 CSS 类完成剩下的工作。
.dragover {
border: 5px dashed green;
background: lightblue;
}
或者甚至显示/隐藏一个更像原始方法的专用元素,但现在只有 CSS,例如:
.my-upload-popup {
position: fixed;
display: none;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%;
height: 100%;
border: 5px dashed green;
background: lightblue;
pointer-events: none;
}
.dragover .my-upload-popup {
display: block;
z-index: 10;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.