您的位置：首页 > Web前端 > JavaScript

JS事件中级 --- 拖拽

2015-06-10 10:19 761 查看

http://bbs.zhinengshe.com/thread-1200-1-1.html

要求：实现div块的拖拽

原理：拖拽过程中鼠标点和div块的相对位置保持不变。

需要理解三点：

1. 为什么要把onmousemove，onmouseup加在document上面？

2. onmouseup要怎么使用？

3. 如何防止div块跑出边界？

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById("div1");

var disX = 0;
var disY = 0;

oDiv.onmousedown = function (event) {
disX = event.clientX - oDiv.offsetLeft;
disY = event.clientY - oDiv.offsetTop;

document.onmousemove = function (event) {

var divLeft = event.clientX - disX;
var divTop = event.clientY - disY;

if (divLeft < 0) divLeft = 0;
if (divLeft > document.documentElement.clientWidth-oDiv.offsetWidth) {
divLeft = document.documentElement.clientWidth-oDiv.offsetWidth;
}
if (divTop < 0) divTop = 0;
if (divTop > document.documentElement.clientHeight - oDiv.offsetHeight) {
divTop = document.documentElement.clientHeight - oDiv.offsetHeight;
}

oDiv.style.left = divLeft + "px";
oDiv.style.top = divTop + "px";
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
};
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

View Code

运行效果：【点击这里】

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

标签：

相关文章推荐

新的分享

章节导航