<div style="width: 100px; height:100px; background-color:red; position: absolute; left:0; top:0;"></div>
<script>
var div = document.getElementsByTagName('div')[0];
var disX, //鼠标点击时,相对方块左边的距离
disY; //鼠标点击时,相对方块上边的距离
div.onmousedown = function () {
disX = event.pageX - parseInt(div.style.left);
disY = event.pageY - parseInt(div.style.top);
document.onmousemove = function (e) {
var event = e || window.event;
console.log(event.pageX + "" + event.pageY); //输出鼠标当前位置
div.style.left = event.pageX - disX + "px";
div.style.top = event.pageY - disY + "px";
}
document.onmouseup = function () {
document.onmousemove = null; //鼠标抬起给拖拽清除
}
}
</script>
完美版:封装函数drag;
未完待续