JS-拖拽(基本原理實現)，js-拖拽
主要要點：
1.拖拽3大事件onmousedown，onmousemove，onmouseup
2. 要拖動的物體需要設定成position：absolute，這樣在拖拽時改變left和top值才有效
3. onmousemove和up事件應該加在document上
4. 滑鼠抬起的時候，清除onmousemove和up事件
需要清楚上面途中一些變數的意思
完整測試代碼：
<body><div id="dragDiv"></div></body><style> #dragDiv{ width: 100px;height: 100px; background: green; position: absolute; }</style>
<pre name="code" class="javascript"><script> window.onload = function () { var oDiv = document.getElementById('dragDiv'); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev){ var ev = ev|| window.event; disX = ev.clientX - oDiv.offsetLeft;//滑鼠按下時游標的x值和 div左邊框的距離 disY = ev.clientY - oDiv.offsetTop; //滑鼠按下時游標的x值和 div上邊框間的距離 if(oDiv.setCapture){ oDiv.setCapture();// 為瞭解決IE老版本的bug } document.onmousemove = function (ev) { var ev = ev || window.event; //拖拽限制範圍, var L = ev.clientX- disX; var T = ev.clientY - disY; // 擷取瀏覽器視窗的寬高 var clientW = document.documentElement.clientWidth || document.body.clientWidth; var clientH = document.documentElement.clientHeight || document.body.clientHeight; var maxW = clientW-oDiv.offsetWidth; // 可拖拽的最大寬度 var maxH = clientH-oDiv.offsetHeight; // 可拖拽的最大高度 if(L<0){ L = 0;// 當貼住瀏覽器視窗的左邊框就不能再拖了 } if(L>maxW){ L = maxW; // 當貼住瀏覽器視窗的右邊框就不能再拖了 } if(T<0){ T = 0;// 當貼住瀏覽器視窗的上邊框就不能再拖了 } if(T>maxH){ T = maxH; // 當貼住瀏覽器視窗的下邊框就不能再拖了 } oDiv.style.left = L +'px'; oDiv.style.top = T +'px'; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; if(releaseCapture){ oDiv.releaseCapture(); } } } return false; }</script>
1. 瀏覽器會有一些預設的行為，會造成拖拽產生bug，所以需要在最後通過return false，阻止瀏覽器預設行為IE8之前版本，選中一些元素之後再進行拖拽，會出現禁止拖拽表徵圖這樣的小bug
需要在拖拽時利用setCapture產生一個透明的層在滑鼠抬起後再用releaseCapture釋放這個層
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
