標籤：doc onload down oca clientx on() ice red viewport
原創是30495103，我這裡做了修改，侵權刪。
上乾貨：這裡首先要注意操作四個角的時候，框的長寬會變化，同時絕對位置的top，left可能隨之變化，我之前就犯了錯誤，導致移動過程框的大小變了，位置也變化了
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>body{display: flex;justify-content: center;flex-direction: column;align-items: center;}/* .main{position: relative;width: 400px;height: 200px;border: 1px solid red;}.main span:nth-child(1){position: absolute;left: -5px;top: -5px;padding: 15px;border-style: solid;border-color: rebeccapurple;border-width: 5px 0 0 5px;}.main span:nth-child(2){position: absolute;right: -5px;top: -5px;padding: 15px;border-style: solid;border-color: rebeccapurple;border-width: 5px 5px 0 0;}.main span:nth-child(3){position: absolute;right: -5px;bottom: -5px;padding: 15px;border-style: solid;border-color: rebeccapurple;border-width: 0 5px 5px 0;}.main span:nth-child(4){position: absolute;left: -5px;bottom: -5px;padding: 15px;border-style: solid;border-color: rebeccapurple;border-width: 0 0 5px 5px;} */.box{width:200px;height:200px;border:1px solid gray;position:absolute;left:200px;top:100px;}.upleftbtn,.uprightbtn,.downleftbtn,.downrightbtn{width:10px;height:10px;border:1px solid steelblue;position: absolute;z-index:5;background: whitesmoke;}.upleftbtn{top:-5px;left:-5px;cursor:nw-resize;}.uprightbtn{top:-5px;right:-5px;cursor:ne-resize;}.downleftbtn{left:-5px;bottom:-5px;cursor:sw-resize;}.downrightbtn{right:-5px;bottom:-5px;cursor:se-resize;}</style><script>var obj = null;//當前操作對象var box = null;//要處理的對象;//保留上次的x,y位置var clickX = 0;var clickY = 0;
//滑鼠點擊 var onDragDown = function(e,type){ e = e ||window.event; var location = { x:e.x || e.clientX, y:e.y || e.clientY } clickX = e.x || e.clientX; clickY = e.y || e.clientY; obj = this; obj.operateType = type; box = document.getElementById("box"); return false; } var onBoxDragDown = function(e,type){ e = e ||window.event; var location = { x:e.x || e.clientX, y:e.y || e.clientY } clickX = e.x || e.clientX; clickY = e.y || e.clientY; obj = this; obj.operateType = type; box = document.getElementById("box"); return false; } var onUpleftbtn = function(e){ e.stopPropagation(); onDragDown(e, "nw"); } var onUpRightbtn = function(e){ e.stopPropagation(); onDragDown(e, "ne"); } var onDownleftbtn = function(e){ e.stopPropagation(); onDragDown(e, "sw"); } var onDownRightbtn = function(e){ e.stopPropagation(); onDragDown(e, "se"); } var onBoxDown = function(e){ onBoxDragDown(e, "move"); }
var move = function(type,location,tarobj){ switch(type) { case ‘n‘: var add_length = clickY - location.y; clickY = location.y; var length = parseInt(tarobj.style.height) + add_length; tarobj.style.height = length + "px"; tarobj.style.top = clickY + "px"; break; case ‘s‘: var add_length = clickY - location.y; clickY = location.y; var length = parseInt(tarobj.style.height) - add_length; tarobj.style.height = length + "px"; break; case ‘w‘: var add_length = clickX - location.x; clickX = location.x; var length = parseInt(tarobj.style.width) + add_length; tarobj.style.width = length + "px"; tarobj.style.left = clickX + "px"; break; case ‘e‘: var add_length = clickX - location.x; clickX = location.x; var length = parseInt(tarobj.style.width) - add_length; tarobj.style.width = length + "px"; break; case ‘move‘: var add_ylength = clickY - location.y; clickY = location.y; var length = parseInt(tarobj.style.top) - add_ylength; // tarobj.style.height = length + "px"; tarobj.style.top = length + "px"; var add_xlength = clickX - location.x; clickX = location.x; var xlength = parseInt(tarobj.style.left) - add_xlength; // tarobj.style.width = length + "px"; tarobj.style.left = xlength + "px"; break; } }
window.onload = function(e){ document.getElementById("upleftbtn").onmousedown = onUpleftbtn; document.getElementById("uprightbtn").onmousedown = onUpRightbtn; document.getElementById("downleftbtn").onmousedown = onDownleftbtn; document.getElementById("downrightbtn").onmousedown = onDownRightbtn;
document.getElementById("box").onmousedown = onBoxDown;
document.onmousemove = function(e){ if(obj) { e = e || window.event; var location = { x:e.x || e.clientX, y:e.y || e.clientY } switch(obj.operateType) { case "nw": move(‘n‘,location,box); move(‘w‘,location,box); break; case "ne": move(‘n‘,location,box); move(‘e‘,location,box); break; case "sw": move(‘s‘,location,box); move(‘w‘,location,box); break; case "se": move(‘s‘,location,box); move(‘e‘,location,box); break; case "move": move(‘move‘,location,box); break; } } } document.onmouseup = function(){ document.body.style.cursor = "auto"; obj = null; } }
</script></head><body> <div class="box" id="box" style="width:200px; height:200px;left:200px; top:100px;"> <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> </body></html>
矩形拖拽移動，四個角拖動改變大小
