js實現拖拽 閉包函數詳細介紹
2024-05-06 14:20:52
供稿：網友
js拖拽
采用簡單的閉包實現方式
代碼如下:
/**
* Created with JetBrains WebStorm.
* User: lsj
* Date: 12-11-24
* Time: 下午12:59
* To change this template use File | Settings | File Templates.
*/
var dragmanager=(function()
{
//標識移動元素z軸坐標
var index_z=1;
//當前的拖拽元素
var drganow;
//移動標識符號
var dragbegin=false;
//鼠標點擊時距離div左邊距離
var relativex=0;
//鼠標點擊時距離div上邊距離
var relativey=0;
//標識鼠標是否移出
var isout=false;
return {
/**
* 為document綁定鼠標提起事件，主要防止鼠標移動過快跳出el區域
*/
bingDocOnMouseUp:function()
{
//注冊全局的onmouseup事件，主要防止鼠標移動過快導致鼠標和el不同步
document.onmouseup=function(e)
{
var ev = window.event || e;
if(isout && dragbegin)
{
//改變div的相對位置
drganow.style.left= (ev.clientX-relativex)+'px';
drganow.style.top=(ev.clientY-relativey)+'px';
drganow.style.cursor='normal';
dragbegin=false;
isout=false;
}
}
},
/**
* 將注入的元素綁定事件
* @param el
*/
registerElementEv:function(element)
{
element.onmousedown=function(e)
{
var ev = window.event || e;
var clientx=ev.clientX;
var clienty= ev.clientY;
var left= parseInt(this.style.left.substring(0, this.style.left.indexOf("p")));
var top= parseInt(this.style.top.substring(0, this.style.top.indexOf("p")));
relativex=clientx-left;
relativey=clienty-top;
index_z++;
this.style.zIndex=index_z;
drganow=this;
dragbegin=true;
}
element.onmousemove=function(e)
{
var ev = window.event || e;
//開始拖拽
if(dragbegin)
{
//改變div的相對位置
this.style.left= (ev.clientX-relativex)+'px';
this.style.top=(ev.clientY-relativey)+'px';
this.style.cursor='move';
}
}
element.onmouseout=function(e)
{
isout=true;
}
element.onmouseup=function(e)
{
var ev = window.event || e;
if(dragbegin)
{
//改變div的相對位置
drganow.style.left= (ev.clientX-relativex)+'px';
drganow.style.top=(ev.clientY-relativey)+'px';
drganow.style.cursor='normal';
dragbegin=false;
}
}
}
}
})();
1.采用閉包的形式實現 ，方便后期的維護,將移動過程所需的變量全部轉移進gridmanager里面
2.拖拽過程中 鼠標移動過快導致移動元素跟不上鼠標的移動，所以要注冊document.oumouseup事件，該事件的開關是有移動元素的onmouseout事件觸發的
3.拖拽的過程中可能會觸發瀏覽器自身的onmousemove的select事件，可以進行屏蔽ie下是onmousemove="document.selection.empty()"
