startDrag: function (obj) {
if (dragDrop.draggedObject)
dragDrop.releaseElement();
dragDrop.startX = obj.offsetLeft;
dragDrop.startY = obj.offsetTop;
dragDrop.draggedObject = obj;
obj.className += ' dragged';
},
首先，如果元素处于拖拽状态，那么我们就释放他（我们后面再讲）。
然后函数会找到元素在起始位置的坐标（offsetLeft和offsetTop），然后保存在startX和startY以备后用。
然后在draggedObject里面保存一个对象的引用。然后给他添加dragged类，这样就可以通过CSS来设置拖拽时候的样式了
当用户使用鼠标或者键盘拖拽元素的时候，代码的最复杂的部分就要跟踪位置的变化。然后给出dX和dY（X和Y的变化）。然后加上startX和startY就是元素现在的位置。
下面的函数用来设定位置：
复制代码 代码如下:
setPosition: function (dx,dy) {
dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px';
dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px';
},
函数通过鼠标和键盘的移动计算所得的dX和dY与初始位置，来设定元素的新位置。
这部分很简单，复杂的地方就在于dx和dy的获得，鼠标部分和键盘部分的处理非常的不同，我们分别来看。
鼠标部分的代码
鼠标部分的计算方面比键盘的要复杂一些，但是在浏览器兼容性方面问题不大。所以我们从鼠标部分开始。
事件
首先我们来讨论事件。很明显的，在拖拽过程中需要mousedown，mousemove，mouseup用来完成选择对象，拖拽，拖拽完成这几个动作。
这一系列事件从需要拖拽元素的mousedown事件开始。所以所有的拖拽元素都需要这个事件来标明拖拽开始了。我们看到：
复制代码 代码如下: