js實現拖拽 閉包函數詳細介紹

　　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()"