代码：

1  2  3  4     
      5      6  7     21 22 23 24 25 
     
26 27 28 29 30 31 html

 

/** * Created by plter on 8/12/16. */(function () {    var rect = document.querySelector("#rect");    var rectX = 0, rectY = 0, offsetX, offsetY;    rect.onmousedown = function (event) {        offsetX = rectX - event.pageX;        offsetY = rectY - event.pageY;        document.onmousemove = function (event) {            rectX = event.pageX + offsetX;            rectY = event.pageY + offsetY;            rect.style.left = rectX + "px";            rect.style.top = rectY + "px";        };        document.onmouseup = function (event) {            document.onmousemove = null;            document.onmouseup = null;        }    }})();js

 

注意两个点：

①：开始拖拽的时候，应判断好拖拽点的位置。

②：不拖拽的时候能够“放下”。

这也挺实用的，如著名的飞机大战。

补充：2016-10-1108:35:16

代码解释

如图，rectX,rectY指的是鼠标的位置，如果不设置offset,鼠标每次的位置会在rect处，这样的效果很不好。

所以应把鼠标位置调整在鼠标落下的地方，即(把rect转换成offset)

也就有了

　　

　　offset保存的是rect到offset的距离的相反数。

　　

　　把rect转换成offset。。

修改：2017-02-15 10:33:23

　　上述代码只适合元素位置为left:0;top:0;的时候，

　　应该是：

　　　　　　rectX=rect.offset().left,

　　　　　　rectY=rect.offset().top;