js拖動(點選+移動)全方位拉出矩形
阿新 • • 發佈：2018-12-01
實現滑鼠點選按下拉動，可以全方位移拉出矩形。
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>拉框</title> <style type="text/css"> .box { border:10px solid #0000CC ; width: 0px; height: 0px; position: absolute; opacity: 0.5; cursor: move; } </style> <script type="text/javascript"> // // 記錄滑鼠按下時的座標 // var startX = 0; // var startY = 0; // // 記錄滑鼠擡起時候的座標 // var mouseX = startX; // var mouseY = startY; // 滑鼠按下 document.onmousedown = function(e) { // 為滑鼠點選時初始座標 startX = e.clientX; startY = e.clientY; var box = document.createElement("div"); box.id = "box"; box.className = "box"; box.style.top = startY + 'px'; box.style.left = startX + 'px'; document.body.appendChild(box); } // 滑鼠移動 document.onmousemove = function(e) { // 取得滑鼠移動時的座標位置 mouseX = e.clientX; mouseY = e.clientY; // 更新 box 尺寸 if(document.getElementById("box") !== null) { if( mouseX < startX && mouseY < startY ){ box.style.left=mouseX+'px' box.style.top=mouseY+'px' box.style.width = startX - mouseX + 'px'; box.style.height = startY - mouseY + 'px'; } if( mouseX > startX && mouseY < startY){ box.style.left=startX+'px' box.style.top=mouseY+'px' box.style.width = mouseX - startX + 'px'; box.style.height = startY - mouseY + 'px'; } if( mouseX < startX && mouseY > startY){ box.style.left = mouseX+'px'; box.style.top = startY+'px' box.style.width = startX - mouseX + 'px'; box.style.height = mouseY - startY + 'px'; } if( mouseX > startX && mouseY > startY ){ box.style.width = mouseX - startX + 'px'; box.style.height = mouseY - startY + 'px'; } } } // 滑鼠擡起 document.onmouseup = function(e) { document.body.removeChild(box); } </script> </head> <body> </body> </html>