拖拽的简单实现

最近要学习拖拽功能，为了完成一个demo，先从最简单的原理开始学习，记录吧。

window. onload = function() {

var diffX, diffY;

var div = document. getElementById( 'div');

div. onmousedown = function( event) {

var event = event || window. event;

//计算出鼠标点击div时，鼠标相对于div的水平和垂直偏移量

diffX = event. clientX - this. offsetLeft;

diffY = event. clientY - this. offsetTop;

//在鼠标点击div时，给document动态绑定在鼠标点击div时，给document动态绑定onmousemove和onmouseup事件

document. onmousemove = function( event) {

var left, top;

left = event. clientX - diffX;

top = event. clientY - diffY;

if( left < 0) {

left = 0;

}

else if( left > ( window. innerWidth - div. offsetWidth)) {

left = window. innerWidth - div. offsetWidth;

}

if( top < 0) {

top = 0;

}

else if( top > ( window. innerHeight - div. offsetHeight)) {

top = window. innerHeight - div. offsetHeight;

}

div. style. left = left + 'px';

div. style. top = top + 'px';

}

//当鼠标松开时对document的onmousemove和onmouseup事件解绑

document. onmouseup = function() {

this. onmousemove = null;

this. onmouseup = null;

}

}

}

原理就是，先算出点击div时，鼠标距离div内部的偏移量。（通过 diffX  = event.clientX - div.offsetLeft 得出）

再在document.onmousemove事件中算出div的left值就行( 通过event.clientX - diffX )得出。