这篇文章详细介绍了JS拖拽插件的实现步骤，主要从以下六步做详细分析，具体内容如下：
一、js拖拽插件的原理
二、根据原理实现的最基本效果
三、代码抽象与优化
四、扩展：有效的拖拽元素
五、性能优化和总结
六、jquery插件化
js拖拽是常见的网页效果，本文将从零开始实现一个简单的js插件。
一、js拖拽插件的原理
常见的拖拽操作是什么样的呢？整过过程大概有下面几个步骤：
1、用鼠标点击被拖拽的元素
2、按住鼠标不放，移动鼠标
3、拖拽元素到一定位置，放开鼠标
这里的过程涉及到三个dom事件：onmousedown,onmousemove,onmouseup。所以拖拽的基本思路就是：
1、用鼠标点击被拖拽的元素触发onmousedown
（1）设置当前元素的可拖拽为true，表示可以拖拽
（2）记录当前鼠标的坐标x,y
（3）记录当前元素的坐标x,y
2、移动鼠标触发onmousemove
（1）判断元素是否可拖拽，如果是则进入步骤2，否则直接返回
（2）如果元素可拖拽，则设置元素的坐标
元素的x坐标 = 鼠标移动的横向距离+元素本来的x坐标 = 鼠标现在的x坐标 - 鼠标之前的x坐标 + 元素本来的x坐标
元素的y坐标 = 鼠标移动的横向距离+元素本来的y坐标 = 鼠标现在的y坐标 - 鼠标之前的y坐标 + 元素本来的y坐标
3、放开鼠标触发onmouseup
（1）将鼠标的可拖拽状态设置成false
回到顶部
二、根据原理实现的最基本效果
在实现基本的效果之前，有几点需要说明的：
1、元素想要被拖动，它的postion属性一定要是relative或absolute
2、通过event.clientX和event.clientY获取鼠标的坐标
3、onmousemove是绑定在document元素上而不是拖拽元素本身，这样能解决快速拖动造成的延迟或停止移动的问题
代码如下：
var dragObj = document.getElementById("test");
dragObj.style.left = "px";
dragObj.style.top = "px";
var mouseX, mouseY, objX, objY;
var dragging = false;
dragObj.onmousedown = function (event) {
event = event || window.event;
dragging = true;
dragObj.style.position = "relative";
mouseX = event.clientX;
mouseY = event.clientY;
objX = parseInt(dragObj.style.left);
objY = parseInt(dragObj.style.top);
}
document.onmousemove = function (event) {
event = event || window.event;
if (dragging) {
dragObj.style.left = parseInt(event.clientX - mouseX + objX) + "px";
dragObj.style.top = parseInt(event.clientY - mouseY + objY) + "px";
}
}
document.onmouseup = function () {
dragging = false;
}
三、代码抽象与优化
上面的代码要做成插件，要将其抽象出来，基本结构如下：
复制代码 代码如下:
; (function (window, undefined) {
function Drag(ele) {}
window.Drag = Drag;
})(window, undefined);
用自执行匿名函数将代码包起来，内部定义Drag方法并暴露到全局中，直接调用Drag，传入被拖拽的元素。
首先对一些常用的方法进行简单的封装：
; (function (window, undefined) { var dom = { //绑定事件 on: function (node, eventName, handler) { if (node.addEventListener) { node.addEventListener(eventName, handler); } else { node.attachEvent("on" + eventName, handler); } }, //获取元素的样式 getStyle: function (node, styleName) { var realStyle = null; if (window.getComputedStyle) { realStyle = window.getComputedStyle(node, null)[styleName]; } else if (node.currentStyle) { realStyle = node.currentStyle[styleName]; } return realStyle; }, //获取设置元素的样式 setCss: function (node, css) { for (var key in css) { node.style[key] = css[key]; } } }; window.Drag = Drag; })(window, undefined);
在一个拖拽操作中，存在着两个对象：被拖拽的对象和鼠标对象，我们定义了下面的两个对象以及它们对应的操作：
首先的拖拽对象，它包含一个元素节点和拖拽之前的坐标x和y：
function DragElement(node) { this.node = node;//被拖拽的元素节点 this.x = ;//拖拽之前的x坐标 this.y = ;//拖拽之前的y坐标 } DragElement.prototype = { constructor: DragElement, init: function () { this.setEleCss({ "left": dom.getStyle(node, "left"), "top": dom.getStyle(node, "top") }) .setXY(node.style.left, node.style.top); }, //设置当前的坐标 setXY: function (x, y) { this.x = parseInt(x) || ; this.y = parseInt(y) || ; return this; }, //设置元素节点的样式 setEleCss: function (css) { dom.setCss(this.node, css); return this; } }
还有一个对象是鼠标，它主要包含x坐标和y坐标：
function Mouse() { this.x = ; this.y = ; } Mouse.prototype.setXY = function (x, y) { this.x = parseInt(x); this.y = parseInt(y); }
这是在拖拽操作中定义的两个对象。
如果一个页面可以有多个拖拽元素，那应该注意什么：
1、每个元素对应一个拖拽对象实例
2、每个页面只能有一个正在拖拽中的元素
为此，我们定义了唯一一个对象用来保存相关的配置：
复制代码 代码如下: