您的位置：首页 > 其它

DIV 拖动效果

2015-12-05 14:26 387 查看

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<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: 950px;
border: 1px solid red;
}
</style>
<script>
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 id="id1">

</div>
<div id="box" onmousedown="tz(this);" onmouseup="un_tz();"></div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航