回武漢打卡第三天，武漢加油，逆戰必勝！今天我們一起分享一下js拖拽的問題。
當然實現拖拽方法是有很多的，下面簡單講一種方法，大致思路如下：
首先需要用到的事件主要有 onmousedown，onmousemove，onmouseup。因為是小盒子(small)在拖拽拖拽，所以首先onmousedown是綁定在small小盒子上面；而拖拽是在文檔中進行的，所以onmousemove和onmouseup可以寫在文檔對象上；
其次css在書寫時記得使用定位，不要使用fixed（位置是相對於瀏覽器窗口的）
再次在鼠標按下的時候，計算鼠標在小盒子中的位置（鼠標的坐標 - 小盒子在文檔中的坐標 - 大盒子的坐標）
然后在鼠標移動的過程中，計算小盒子距離左邊的距離，也就是定位值（鼠標的坐標 - 鼠標在小盒子中的位置）
最后：判斷臨界值
最小臨界值都是0
最大臨界值：大盒子(big)的寬高 - 小盒子(small)的寬高
值得注意的是獲取鼠標坐標有兩種辦法，一種是clientX,clientY;另外一種是pageX,pageY;在這里前者會有一定問題（比如閃爍），建議使用pageX,pageY
具體實現附代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;}
.big{width: 600px;height: 500px;background-color: #000;margin: 50px auto;position: relative;border:30px solid red;}
.small{width: 100px;height: 100px;background-color: #ff0;position: absolute;}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
<script type="text/javascript">
window.onload = function(){
// 獲取元素
var bigBox = document.querySelector(".big");
var sBox = document.querySelector(".small");
// 獲取大盒子的大小
var bigbox_w = bigBox.offsetWidth;
var bigbox_h = bigBox.offsetHeight;
// 獲取小盒子的大小
var sbox_w = sBox.offsetWidth;
var sbox_h = sBox.offsetHeight;
// 獲取大盒子的間距
var bigBox_l = bigBox.offsetLeft;
var bigBox_t = bigBox.offsetTop;
// 小盒子鼠標按下才觸發事件
sBox.onmousedown = function(ev){
ev = ev || window.event;
// 獲取鼠標在盒子中的位置
var disX = ev.pageX - sBox.offsetLeft;
var disY = ev.pageY - sBox.offsetTop;
console.log(disX,disY)
// 鼠標在文檔中移動
document.onmousemove = function(e){
e = e || window.event;
var moveX = e.pageX - disX;
var moveY = e.pageY - disY;
if(moveX < 0){
moveX = 0;
}
if(moveY < 0){
moveY = 0;
}
if(moveX > bigbox_w - sbox_w){
moveX = bigbox_w - sbox_w;
}
if(moveY > bigbox_h - sbox_h){
moveY = bigbox_h - sbox_h;
}
sBox.style.left = moveX + 'px';
sBox.style.top = moveY + 'px';
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</body>
</html>