BOX（拖拽盒子）
js画一个矩形，拖拽矩形的4个角可以将矩形缩放，在矩形上按住鼠标拖动可以移动该矩形的位置
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>BOX（拖拽盒子）</title> <style> .box{ position:absolute; border:2px solid #666; } .topLeft,.topRight,.bottomLeft,.bottomRight{ position: absolute; width:10px; height:10px; z-index:100; border:2px solid #666; background-color: white; } .topLeft,.topRight{ top:-5px; } .bottomLeft,.bottomRight{ bottom:-5px; } .topLeft,.bottomLeft{ left:-5px; } .topRight,.bottomRight{ right:-5px; } .topLeft{ cursor:nw-resize; } .topRight{ cursor:ne-resize; } .bottomLeft{ cursor:sw-resize; } .bottomRight{ cursor:se-resize; } </style> </head> <body> <div class="box" id="box" style="width:100px;height:100px;top:100px;left:100px;"> <div class="topLeft"></div> <div class="topRight"></div> <div class="bottomLeft"></div> <div class="bottomRight"></div> </div> <script> //获取公用节点 var box = document.getElementById("box"); var topLeft = document.getElementsByClassName("topLeft")[0]; var topRight = document.getElementsByClassName("topRight")[0]; var bottomLeft = document.getElementsByClassName("bottomLeft")[0]; var bottomRight = document.getElementsByClassName("bottomRight")[0]; var position = {x:100,y:100};//位置数据 var minWidHeg = 25;//拖拽最小宽度 window.onload = function() { //拖拽整个框体 box.onmousedown = function(ev) { var disX=ev.clientX-box.offsetLeft; var disY=ev.clientY-box.offsetTop; document.onmousemove = function(ev) { position.x = ev.clientX-disX; position.y = ev.clientY-disY; box.style.left = position.x + "px"; box.style.top = position.y + "px"; }; document.onmouseup = function() { document.onmousemove = null; }; return false; }; //拖拽左上角 topLeft.onmousedown = function(ev) { position.x = ev.clientX; position.y = ev.clientY; document.onmousemove = function(ev) { var addHeight = position.y - ev.clientY; var addLength = position.x - ev.clientX; var height = parseInt(box.style.height) + addHeight; var length = parseInt(box.style.width) + addLength; if(height>minWidHeg){ position.y = ev.clientY; box.style.height = height + "px"; box.style.top = position.y + "px"; } if(length>minWidHeg){ position.x = ev.clientX; box.style.width = length + "px"; box.style.left = position.x + "px"; } }; document.onmouseup = function() { document.onmousemove = null;//移开清除 }; ev.stopPropagation();//阻止事件冒泡 return false; }; //拖拽右上角 topRight.onmousedown = function(ev) { position.x = ev.clientX; position.y = ev.clientY; document.onmousemove = function(ev) { var addHeight = position.y - ev.clientY; var addLength = position.x - ev.clientX; var height = parseInt(box.style.height) + addHeight; var length = parseInt(box.style.width) - addLength; if(height>minWidHeg){ position.y = ev.clientY; box.style.height = height + "px"; } if(length>minWidHeg){ position.x = ev.clientX; box.style.top = position.y + "px"; box.style.width = length + "px"; } }; document.onmouseup = function() { document.onmousemove = null; }; ev.stopPropagation(); return false; }; //拖拽左下角 bottomLeft.onmousedown = function(ev) { position.x = ev.clientX; position.y = ev.clientY; document.onmousemove = function(ev) { var addHeight = position.y - ev.clientY; var addLength = position.x - ev.clientX; var height = parseInt(box.style.height) - addHeight; var length = parseInt(box.style.width) + addLength; if(height>minWidHeg){ position.y = ev.clientY; box.style.height = height + "px"; } if(length>minWidHeg){ position.x = ev.clientX; box.style.width = length + "px"; box.style.left = position.x + "px"; } }; document.onmouseup = function() { document.onmousemove = null; }; ev.stopPropagation(); return false; }; //拖拽右下角 bottomRight.onmousedown = function(ev) { position.x = ev.clientX; position.y = ev.clientY; document.onmousemove = function(ev) { var addHeight = position.y - ev.clientY; var addLength = position.x - ev.clientX; var height = parseInt(box.style.height) - addHeight; var length = parseInt(box.style.width) - addLength; if(height>minWidHeg){ position.y = ev.clientY; box.style.height = height + "px"; } if(length>minWidHeg){ position.x = ev.clientX; box.style.width = length + "px"; } }; document.onmouseup = function() { document.onmousemove = null; }; ev.stopPropagation(); return false; }; }; </script> </body> </html>
