JS實現拖動div改變大小
阿新 • • 發佈：2019-01-29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .upBtn,.downBtn,.upLeftBtn,.upRightBtn,.downLeftBtn,.downRightBtn,.centerLeftBtn,.centerRightBtn { position:absolute; background:#CC0000; width:9px; height:9px; z-index:5; } .upBtn { top:-4px; left:50%; cursor:n-resize; } .downBtn { bottom:-4px; left:50%; cursor:s-resize; } .upLeftBtn { top:-4px; left:-4px; cursor:nw-resize; } .upRightBtn { top:-4px; right:-4px; cursor:ne-resize; } .downLeftBtn { bottom:-4px; left:-4px; cursor:sw-resize; } .downRightBtn { bottom:-4px; right:-4px; cursor:se-resize; } .centerLeftBtn { top:50%; left:-4px; cursor:w-resize; } .centerRightBtn { top:50%; right:-4px; cursor:e-resize; } </style> <script type="text/javascript" > function $(id) { return document.getElementById(id); } function getEvent(e) { return e || window.event; } function getLocation(e) { return { x: e.x || e.clientX, y: e.y || e.clientY } } var obj = null; // 當前操作的物件 var preview = null; // 要處理的物件 var clickX = 0; // 保留上次的X軸位置 var clickY = 0; // 保留上次的Y軸位置 // 滑鼠點選 var onDragDown = function (e, type) { e = getEvent(e); var location = getLocation(e); clickY = location.y; clickX = location.x; obj = this; obj.operateType = type; preview = $("preview"); return false; }; var onUpBtnDown = function (e) { onDragDown(e, "n"); }; var onDownBtnDown = function (e) { onDragDown(e, "s"); }; var onCenterLeftBtnDown = function (e) { onDragDown(e, "w"); }; var onCenterRightBtnDown = function (e) { onDragDown(e, "e"); }; var onUpLeftBtnDown = function (e) { onDragDown(e, "nw"); }; var onUpRightBtnDown = function (e) { onDragDown(e, "ne"); }; var onDownLeftBtnDown = function (e) { onDragDown(e, "sw"); }; var onDownRightBtnDown = function (e) { onDragDown(e, "se"); }; var onDragUp = function () { document.body.style.cursor = "auto"; obj = null; }; var move = function (operateType, location, preview) { document.body.style.cursor = location + "_resize"; switch (operateType) { case "e": var add_length = clickX - location.x; clickX = location.x; var length = parseInt(preview.style.width) - add_length; preview.style.width = length + "px"; break; case "s": var add_length = clickY - location.y; clickY = location.y; var length = parseInt(preview.style.height) - add_length; preview.style.height = length + "px"; break; case "w": var add_length = clickX - location.x; clickX = location.x; var length = parseInt(preview.style.width) + add_length; preview.style.width = length + "px"; preview.style.left = clickX + "px"; break; case "n": var add_length = clickY - location.y; clickY = location.y; var length = parseInt(preview.style.height) + add_length; preview.style.height = length + "px"; preview.style.top = clickY + "px"; break; } }; var onDragMove = function (e) { if (obj) { e = getEvent(e); var location = getLocation(e); switch (obj.operateType) { case "n": move("n", location, preview); break; case "s": move("s", location, preview); break; case "w": move("w", location, preview); break; case "e": move("e", location, preview); break; case "nw": move("n", location, preview); move("w", location, preview); break; case "ne": move("n", location, preview); move("e", location, preview); break; case "sw": move("s", location, preview); move("w", location, preview); break; case "se": move("s", location, preview); move("e", location, preview); break; } } return false; }; window.onload = function () { $("upBtn").onmousedown = onUpBtnDown; $("downBtn").onmousedown = onDownBtnDown; $("centerLeftBtn").onmousedown = onCenterLeftBtnDown; $("centerRightBtn").onmousedown = onCenterRightBtnDown; $("upLeftBtn").onmousedown = onUpLeftBtnDown; $("upRightBtn").onmousedown = onUpRightBtnDown; $("downLeftBtn").onmousedown = onDownLeftBtnDown; $("downRightBtn").onmousedown = onDownRightBtnDown; document.onmousemove = onDragMove; document.onmouseup = onDragUp; } </script> </head> <body> <div id="preview" style="width:200px; height:200px; border:1px solid gray; position:absolute; left:200px; top:100px;" > <div class="upBtn" id="upBtn"></div> <div class="downBtn" id="downBtn"></div> <div class="upLeftBtn" id="upLeftBtn"></div> <div class="upRightBtn" id="upRightBtn"></div> <div class="downLeftBtn" id="downLeftBtn"></div> <div class="downRightBtn" id="downRightBtn"></div> <div class="centerLeftBtn" id="centerLeftBtn"></div> <div class="centerRightBtn" id="centerRightBtn"></div> </div> </body> </html>