<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS Event鼠標拖拽事件</title>
<style>
#box{width:200px;height:200px;background:#000;position:absolute;}
</style>
</head>
<body>
<div id="box"></div>
<script>
window.onload=function(){ //onload 加載頁面；
var oBox=document.getElementById("box"); //找對象
document.onmousemove=function(ev){ //通常在document中添加事件，不在body中添加事件；添加onmousemove鼠標事件；綁定在事件的匿名函數，值可以有一個參數，並且它就是事件對象；
var l=ev.clientX;
var t=ev.clientY;
//console.log(l); //控制台顯示鼠標的xy軸坐標
oBox.style.left=l+"px";
oBox.style.top=t+"px"; //div盒子跟隨鼠標動，鼠標在document瀏覽器窗口中移動到哪，div盒子跟隨到哪
};
};
</script>
</body>
</html>
=======================裝作是 華麗的分割線===============================================
//解決鼠標動盒子跟着動的問題，改為 鼠標點擊一下之后，盒子才跟着鼠標動
<script>
window.onload=function(){
var oBox=document.getElementById("box")；
oBox.onmousedown=function(){
document.onmousemove=function(ev){
var l=ev.clientX;
var t=ev.clientY;
//console.log(l);
oBox.style.left=l+"px";
oBox.style.top=t+"px";
};
};
};
</script>
=======================裝作是 華麗的分割線===============================================
//解決 鼠標點擊一下之后，盒子才跟着鼠標動 的問題，改為 鼠標左鍵點擊到div盒子之后開始挪動盒子，松開鼠標之后 盒子就不在動
<script>
window.onload = function() {
var oBox = document.getElementById("box");
oBox.onmousedown = function() {
document.onmousemove = function(ev) {
var l = ev.clientX;
var t = ev.clientY;
//console.log(l);
oBox.style.left = l + "px";
oBox.style.top = t + "px";
};
document.onmouseup=function(){
document.onmousemove=null;
};
};
};
</script>
=======================裝作是 華麗的分割線===============================================
//解決 鼠標點擊盒子挪動 時候，盒子最左上角跳動到指針的位置 的問題；
<script>
window.onload = function() {
var oBox = document.getElementById("box");
oBox.onmousedown = function(ev) {
var disX=ev.clientX-oBox.offsetLeft; //計算X軸，div盒子左邊框與鼠標之間的距離
var disY=ev.clientY-oBox.offsetTop; //計算Y軸，div盒子上邊框與鼠標之間的距離
document.onmousemove = function(ev) {
var l = ev.clientX-disX; //計算X軸，瀏覽器左邊窗口與div盒子左邊邊框的距離
var t = ev.clientY-disY; //計算Y軸，瀏覽器上邊窗口與div盒子上邊邊框的距離
console.log(l);
oBox.style.left = l + "px";
oBox.style.top = t + "px";
};
document.onmouseup = function() {
document.onmousemove = null;
};
return false; //阻止默認事件的發生
};
};
</script>