js實作拖曳 閉包函數詳細介紹_javascript技巧

js拖拽

採用簡單的閉包實現方式

複製代碼 代碼如下:

/**
* 使用 JetBrains WebStorm 建立。
* 使用者：lsj
* 日期：12-11-24
* 時間：下午 12:59
* 若要變更此模板，請使用檔案| 範本。設定 |文件模板。
*/
var dragmanager=(function()
{
//標識移動元素z軸座標
var index_z=1🎜>//標識移動元素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)
{
registerEv:function(element)
{
ementel .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()"