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

　　js拖拽

　　采用簡單的閉包實現方式

　　代碼如下:

　　/**

　　* Created with JetBrains WebStorm

　　* User: lsj

　　* Date:

　　* Time: 下午:

　　* To change this template use File | Settings | File Templates

　　*/

　　var dragmanager=(function()

　　{

　　//標識移動元素z軸坐標

　　var index_z=;

　　//當前的拖拽元素

　　var drganow;

　　//移動標識符號

　　var dragbegin=false;

　　//鼠標點擊時距離div左邊距離

　　var relativex=;

　　//鼠標點擊時距離div上邊距離

　　var relativey=;

　　//標識鼠標是否移出

　　var isout=false;

　　return {

　　/**

　　* 為document綁定鼠標提起事件主要防止鼠標移動過快跳出el區域

　　*/

　　bingDocOnMouseUp:function()

　　{

　　//注冊全局的onmouseup事件主要防止鼠標移動過快導致鼠標和el不同步

　　documentonmouseup=function(e)

　　{

　　var ev = windowevent || e;

　　if(isout && dragbegin)

　　{

　　//改變div的相對位置

　　drganowstyleleft= (evclientXrelativex)+px;

　　drganowstyletop=(evclientYrelativey)+px;

　　drganowstylecursor=normal;

　　dragbegin=false;

　　isout=false;

　　}

　　}

　　}

　　/**

　　* 將注入的元素綁定事件

　　* @param el

　　*/

　　registerElementEv:function(element)

　　{

　　elementonmousedown=function(e)

　　{

　　var ev = windowevent || e;

　　var clientx=evclientX;

　　var clienty= evclientY;

　　var left= parseInt(thisstyleleftsubstring( thisstyleleftindexOf("p")));

　　var top= parseInt(thisstyletopsubstring( thisstyletopindexOf("p")));

　　relativex=clientxleft;

　　relativey=clientytop;

　　index_z++;

　　thisstylezIndex=index_z;

　　drganow=this;

　　dragbegin=true;

　　}

　　elementonmousemove=function(e)

　　{

　　var ev = windowevent || e;

　　//開始拖拽

　　if(dragbegin)

　　{

　　//改變div的相對位置

　　thisstyleleft= (evclientXrelativex)+px;

　　thisstyletop=(evclientYrelativey)+px;

　　thisstylecursor=move;

　　}

　　}

　　elementonmouseout=function(e)

　　{

　　isout=true;

　　}

　　elementonmouseup=function(e)

　　{

　　var ev = windowevent || e;

　　if(dragbegin)

　　{

　　//改變div的相對位置

　　drganowstyleleft= (evclientXrelativex)+px;

　　drganowstyletop=(evclientYrelativey)+px;

　　drganowstylecursor=normal;

　　dragbegin=false;

　　}

　　}

　　}

　　}

　　})();

　　采用閉包的形式實現 方便後期的維護將移動過程所需的變量全部轉移進gridmanager裡面

　　拖拽過程中 鼠標移動過快導致移動元素跟不上鼠標的移動所以要注冊documentoumouseup事件該事件的開關是有移動元素的onmouseout事件觸發的

　　拖拽的過程中可能會觸發浏覽器自身的onmousemove的select事件可以進行屏蔽ie下是onmousemove="documentselectionempty()"

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20315.html