課程
/前端開發
/JavaScript
/鼠標拖拽效果
有答案嗎？？
2017-05-04
源自：鼠標拖拽效果 8-2
正在回答
<!DOCTYPE?html> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <title>慕課網-拖拽實現</title> <style?type="text/css"> ????#draggable{?width:?100px;height:?100px;?position:?absolute;top:?100px;left:?100px;border:?1px?solid?#ccc;background:?#eee;padding:?10px;cursor:?move;} </style> </head> <body> <div?id="draggable">拖我</div> <script?type="text/javascript"> ????var?oDrag?=?document.getElementById('draggable'); ????var?isDraging?=?false; ????var?startX?=?0; ????var?startY?=?0; ????oDrag.addEventListener('mousedown',function(e){ ????????//鼠標事件1?-?在標題欄按下（要計算鼠標相對拖拽元素的左上角的坐標?，并且標記元素為可拖動） ????????isDraging?=?true; ????????startX?=?e.pageX?-?this.offsetLeft; ????????startY?=?e.pageY?-?this.offsetTop; ????}) ????document.onmouseup?=?function(e){ ????????//鼠標事件3?-?鼠標松開的時候（標記元素為不可拖動） ????????isDraging?=?false; ????} ????document.onmousemove?=?function(e)?{ ????????//鼠標事件2?-?鼠標移動時（要檢測，元素是否標記為移動） ????????var?moveX?=?e.pageX?-?startX; ????????var?moveY?=?e.pageY?-?startY; ????????var?pageX?=?document.documentElement.clientWidth?-?oDrag.offsetWidth; ????????var?pageY?=?document.documentElement.clientHeight?-?oDrag.offsetHeight; ????????moveX?=?Math.min(pageX,?Math.max(0,?moveX)); ????????moveY?=?Math.min(pageY,?Math.max(0,?moveY)); ????????if?(isDraging)?{ ????????????oDrag.style.left?=?moveX?+?'px'; ????????????oDrag.style.top?=?moveY?+?'px'; ????????} ????}; </script> </body> </html>
舉報
用你的鼠標任意拖拽屏幕上的彈出窗口，了解把元素設置為可拖拽的原理
2 回答isDrag是window對象的屬性嗎？
1 回答這個視頻可以下載嗎
2 回答有個小問題
1 回答close-button 不是應該放在div 里面嗎！
1 回答如果頁面有滾動條，這個程序就會有bug
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-05-04
<!DOCTYPE?html> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <title>慕課網-拖拽實現</title> <style?type="text/css"> ????#draggable{?width:?100px;height:?100px;?position:?absolute;top:?100px;left:?100px;border:?1px?solid?#ccc;background:?#eee;padding:?10px;cursor:?move;} </style> </head> <body> <div?id="draggable">拖我</div> <script?type="text/javascript"> ????var?oDrag?=?document.getElementById('draggable'); ????var?isDraging?=?false; ????var?startX?=?0; ????var?startY?=?0; ????oDrag.addEventListener('mousedown',function(e){ ????????//鼠標事件1?-?在標題欄按下（要計算鼠標相對拖拽元素的左上角的坐標?，并且標記元素為可拖動） ????????isDraging?=?true; ????????startX?=?e.pageX?-?this.offsetLeft; ????????startY?=?e.pageY?-?this.offsetTop; ????}) ????document.onmouseup?=?function(e){ ????????//鼠標事件3?-?鼠標松開的時候（標記元素為不可拖動） ????????isDraging?=?false; ????} ????document.onmousemove?=?function(e)?{ ????????//鼠標事件2?-?鼠標移動時（要檢測，元素是否標記為移動） ????????var?moveX?=?e.pageX?-?startX; ????????var?moveY?=?e.pageY?-?startY; ????????var?pageX?=?document.documentElement.clientWidth?-?oDrag.offsetWidth; ????????var?pageY?=?document.documentElement.clientHeight?-?oDrag.offsetHeight; ????????moveX?=?Math.min(pageX,?Math.max(0,?moveX)); ????????moveY?=?Math.min(pageY,?Math.max(0,?moveY)); ????????if?(isDraging)?{ ????????????oDrag.style.left?=?moveX?+?'px'; ????????????oDrag.style.top?=?moveY?+?'px'; ????????} ????}; </script> </body> </html>