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

　　推荐阅读

　　jquery remove方法应用详解

复制代码 代码如下: $(document).ready(function () { var dom = $("span"); //出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果，转载请注明出处，谢谢！ $(dom[0]).remove(); console.log(dom.length) >>>详细阅读

本文标题：js实现拖拽 闭包函数详细介绍

地址：http://www.17bianji.com/kaifa2/JS/22927.html

 1/2    1