拖拽box1元素
流程：
- 当鼠标在被拖拽元素上按下时，开始拖拽
- 当鼠标被移动时被拖拽元素跟随鼠标移动
- 当鼠标松开时被拖拽元素固定在当前位置
改进
问题
当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能异常
- 可以通过return false取消默认行为，对IE8不兼容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function() {
/* 拖拽box1元素 */
// 鼠标按钮在box1按下
var box1 = document.getElementById("box1");
box1.onmousedown = function(event) {
// 求出div的偏移量，鼠标.cilentX-元素点.offsetLeft
event = event || window.event;
var ol = event.clientX-box1.offsetLeft;
var ot = event.clientY-box1.offsetTop;
// box1跟随鼠标移动
document.onmousemove = function(event) {
event = event || window.event;
var x = event.clientX - ol;
var y = event.clientY - ot;
box1.style.left = x + "px";
box1.style.top = y + "px";
};
// 鼠标松开
document.onmouseup = function() {
// 取消onmousemove事件
document.onmousemove = null;
// 取消onmouseup事件
document.onmouseup = null;
};
return false;
};
};
</script>
</head>
<body>
<p>我是文字</p>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
2736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
