DIV 拖动效果高级篇-白红宇

			
     		Document

高级插件

：http://www.w2bc.com/demo/201509/2015-09-16-a-power-draggable-plugin/index.html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

left: 0px;

top: 0px;

}

#box {

width: 300px;

height: 300px;

background: green;

position: absolute;

}

#id1 {

position: absolute;

left: 0px;

top: 0px;

width: 100px;

height: 100px;

border: 1px solid red;

}

</style>

var DOM, oX, oY;

function tz(dom) {

DOM = dom;

}

function un_tz() {

DOM = null;

}

window.onmousemove = function(e) {

var eve = e || window.event;

if (DOM) {

// 原点不可移动

if (DOM.offsetLeft < 0 && DOM.offsetTop < 0) {

document.getElementById("box").style.left = 1 + "px";

document.getElementById("box").style.top = 1 + "px";

document.getElementById("box").style.marginLeft = 1 + "px";

document.getElementById("box").style. marginTop = 1 + "px";

}

DOM.style.left = DOM.offsetLeft + eve.clientX - oX + 'px';

DOM.style.top = DOM.offsetTop + eve.clientY - oY + 'px';

}

oX = eve.clientX;

oY = eve.clientY;

document.getElementById("box").innerHTML = "左上角原点相对body远点：(" + DOM.offsetLeft + "," + DOM.offsetTop + ")" + "<br/>" + "鼠标点相对body远点：(" + eve.pageX + "," + eve.pageY + ")" + "<br/>" + "鼠标点相对body远点：(" + eve.clientX + "," + eve.clientY + ")" + "<br/>";

document.getElementById("box").innerHTML +="body的大小：("+document.body.scrollWidth + "," +document.body.scrollHeight+")<br/>" ;

document.getElementById("box").innerHTML +="屏幕分辨率：("+window.screen.width + "," +window.screen.height +")" ;

}

</script>

</head>

<body>

</div>

</body>

</html>