熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

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

2013-11-15 12:06:53  來源: JSP教程 

  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
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.