輕風細雨_林木木
阿新 • • 發佈：2018-12-19
js 特效 拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div{ width: 100px; height: 100px; background-color: blue; position:absolute; top: 20px; left: 300px; } </style> </head> <body> <div id = "div"></div> <script type="text/javascript"> var muvDiv = document.getElementById('div'); muvDiv.onmousedown = function(){ // 1.滑鼠位置減去盒子位置，獲取差值 var ol = event.clientX - muvDiv.offsetLeft; var ot = event.clientY - muvDiv.offsetTop; document.onmousemove = function(){ var event = event || window.event; // 2.獲取當前滑鼠位置，減去差值，求出準確位置 var top = event.clientY - ot; var left = event.clientX - ol; // 3.給css獲取新值 muvDiv.style.top = top + 'px'; muvDiv.style.left = left + 'px'; } } // 4.清除onmousemove函式 document.onmouseup = function(){ document.onmousemove = null; } </script> </body> </html>