拖拽 ~~~javascript ~~~ ...
拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: skyblue;
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元素
- 拖拽的流程
1.當滑鼠在被拖拽元素上按下時，開始拖拽 onmousedown
2.當滑鼠移動時被拖拽元素跟隨滑鼠移動 onmousemove
3.當滑鼠鬆開時，被拖拽元素固定在當前位置 onmouseup
*/
// 獲取box1？
var box1=document.getElementById("box1");
// 為box1綁定一個滑鼠按下事件
box1.onmousedown=function(event){
// div的偏移量 滑鼠.clientX - 元素.offsetLeft
// div的偏移量 滑鼠.clentY -元素.offsetTop
event = event || window.event;
var ol=event.clientX - box1.offsetLeft;
var ot=event.clientY-box1.offsetTop;
// 為document綁定一個onmousemove事件
document.onmousemove=function(event){
event = event || window.event;
// 當滑鼠移動時被拖拽元素跟隨滑鼠移動 onmousemove
// 獲取滑鼠坐標？
var left =event.clientX - ol;
var top=event.clientY - ot;
// 修改box1的位置
box1.style.left=left+"px";
box1.style.top=top+"px";
}
// 當滑鼠鬆開時，被拖拽元素固定在當前位置 onmouseup
document.onmouseup=function(){
// 取消document.onmousemove事件
document.onmousemove=null;
document.onmouseup=null;
alert(12);
}
};
/*
當我們拖拽一個網頁中的內容時，瀏覽器會預設去搜索引擎中搜索內容
此事後導致拖拽功能的異常
如果不希望發生這個異常 return false
對IE8不起作用
*/
return false;
}
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
