JavaScript拖拽的实现

SJY发表于:2016年08月28日 16:28 • 阅读:

WordPress 上传图片时的拖拽功能非常唯美,只要把图片拖动到窗口,就会出现一个半透明的蒙板,离开窗口又恢复,他是怎么实现的呢?

一般拖拽都是从哪里进去,就从哪里出去。但像WordPress那样的拖拽功能,这么做肯定是不行的,因为一拖拽进去就会出现蒙板,这就意味着一进去就已经离开原来的区域了(跳到了蒙板区域)所以这里需要变通一下。

进入时,绑定原先的窗口区域;离开时,绑定蒙板区域。

dom_window.addEventListener('dragenter', function(e) {
e.preventDefault();
dom_mask.style.display = 'block';
}, false);
dom_mask.addEventListener('dragleave', function(e) {
e.preventDefault();
dom_mask.style.display = 'none';
}, false);

dom_window 原先的窗口区域节点

dom_mask 蒙板区域节点

代码大意为:进入 dom_window 区域时,显示蒙板;离开 dom_mask 区域时,隐藏蒙板。

那么如果蒙板区域内还有其他区域呢?这就会导致,从蒙板区域拖动到其子区域,也会触发离开。不过好在蒙板区域仅仅是作为效果显示,其子区域的内容根本就不需要鼠标事件,所以只需要把子区域的鼠标事件禁掉就可以了,用CSS就可以轻松实现

假设子区域的class为inner

.inner{
  pointer-events: none;
}

搞定!

欢迎转载,但请保留原文地址 http://www.sjyhome.com/javascript/1042.html

标签: 拖拽

相关文章

回复(0)