Javascript教程：网页拖放实现代码（二）

修缮拖动功能
    当试了上面的例子之后，你会发现元素的左上角总是和指针在一起。这个结果对用户来说有一点不爽，因为当鼠标开始移动的时候，元素好像是突然跳了一下。理想的情况是，这个动作应该看上去好像是这个元素是被指针“拾起”的，也就是说当在拖动元素的时候，用户点击的那一点就是指针应该保持的位置。
    要达到需要的效果，必须做一些额外的计算。需要计算元素左上角和指针位置之间的差值。这个差值应该在mousedown事件发生的时候确定，并且一直保持，直到mouseup事件发生。通过将event的clientX和clientY属性与该元素的offsetLeft和offsetTop属性进行比较，就可以算出水平方向和垂直方向上需要多少空间。

    为了保存x和y坐标上的差值，还需要几个变量。diffX和diffY这些变量需要在onmousemove事件处理程序中用到，来对元素进行适当的定位，如下面的例子所示：

var DragDrop = function () { var dragging = null; var diffX = 0; var diffY = 0; function handleEvent(event) { //获取事件和目标 event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); //确定事件类型 switch (event.type) { case "mousedown": if (target.className.indexOf("draggable") > -1) { dragging = target; diffX = event.clientX - target.offsetLeft; diffY = event.clientY - target.offsetTop; } break; case "mousemove": if (dragging !== null) { //获取事件 event = EventUtil.getEvent(event); //指定位置 dragging.style.left = (event.clientX - diffX) + "px"; dragging.style.top = (event.clientY - diffY) + "px"; } break; case "mouseup": dragging = null; break; } }; //公共接口 return { enable: function () { EventUtil.addHandler(document, "mousedown", handleEvent); EventUtil.addHandler(document, "mousemove", handleEvent); EventUtil.addHandler(document, "mouseup", handleEvent); }, disable: function () { EventUtil.removeHandler(document, "mousedown", handleEvent); EventUtil.removeHandler(document, "mousemove", handleEvent); EventUtil.removeHandler(document, "mouseup", handleEvent); } } }(); //启用拖放 DragDrop.enable();