JS:簡單的拖拽事件和bug修復
阿新 • • 發佈：2019-02-06
當滑鼠按下時，滑鼠相對於盒子的位置是沒有變化的，即是說圖中的disX和disY是不變的，改變的只有滑鼠的clienX、clienY和盒子的left、top，其中，clienX和clienY的值是可以獲取的，且clienX-disX就為盒子的left值，clienY-disY就為盒子的top值，知道以上幾點，我們就可以開始編寫程式碼。
思路為：當滑鼠按下時，獲取disX與disY，在移動滑鼠時，使盒子的left值等於滑鼠的clienX-disX，top值等於clienY-disY，當滑鼠鬆開時，時按下和移動兩個事件為空（即不執行）。程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡單拖拽盒子</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
var disX=0;
var disY=0;
oBox.onmousedown=function(ev){
var iEvent = ev || event;
disX=iEvent.clientX-oBox.offsetLeft;
disY=iEvent.clientY-oBox.offsetTop;
oBox.onmousemove=function(ev){
var iEvent = ev || event;
var left=iEvent.clientX-disX;
var top=iEvent.clientY-disY;
oBox.style.left=left+'px';
oBox.style.top=top+'px';
}
oBox.onmouseup=function(){
oBox.onmousemove=null;
oBox.onmouseup=null;
}
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
但是當我們拖動滑鼠時，發現如果拖動太快，滑鼠飛出盒子時，盒子就會停在原地不動
然而我們再次發現，當我們將盒子移到可視區的左邊或者上面時，我們便無法將盒子拖拽回來了，那我們就限制一下盒子運動的範圍為可視區的範圍內。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡單拖拽盒子</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
var disX=0;
var disY=0;
oBox.onmousedown=function(ev){
var iEvent = ev || event;
disX=iEvent.clientX-oBox.offsetLeft;
disY=iEvent.clientY-oBox.offsetTop;
document.onmousemove=function(ev){
var iEvent = ev || event;
var left=iEvent.clientX-disX;
var top=iEvent.clientY-disY;
if(left<0){
left=0;
}
else if(left>document.documentElement.clientWidth-oBox.offsetWidth){
left=document.documentElement.clientWidth-oBox.offsetWidth