JS === 拖拽盒子

Posted 2022-04-10 rabbit-lin0903

样式：

.boxwidth:300px;height: 300px;background:pink;position: absolute;user-select: none  //大盒子 == user-select : 取消了用户选中文本
.titlewidth: 100%;height: 50px; background:#ccc;cursor:move;  //拖动title 大盒子移动
.left-handlerwidth:5px;height: 100%;background:green;position: absolute;top:0;left:0;cursor: ew-resize;  //左边框框
.right-handlerwidth:5px;height: 100%;background:green;position: absolute;top:0;right:0;cursor: ew-resize; //右边框框
.top-handlerwidth: 100%;height: 5px;background:red;position: absolute;top:0;left:0;cursor: ns-resize;  //上边框框
.bottom-handlerwidth: 100%;height: 5px;background:red;position: absolute;bottom:0;left:0;cursor: ns-resize; //下边框框
.left-top-handlerwidth: 10px;height: 10px;border-radius: 50%;background: yellow;position: absolute;top:0;left:0;cursor: nwse-resize;  //左上角
.right-top-handlerwidth: 10px;height: 10px;border-radius: 50%;background: yellow;position: absolute;top:0;right:0;cursor: nesw-resize; //右上角
.left-bottom-handlerwidth: 10px;height: 10px;border-radius: 50%;background: yellow;position: absolute;bottom:0;left:0;cursor: nesw-resize; //左下角
.right-bottom-handlerwidth: 10px;height: 10px;border-radius: 50%;background: yellow;position: absolute;bottom:0;right:0;cursor: nwse-resize; //右下角

 

结构：

<div class="box">
　　<div class="title">拖走就走</div>
　　<div class="left-handler"></div>
　　<div class="right-handler"></div>
　　<div class="top-handler"></div>
　　<div class="bottom-handler"></div>
　　<div class="left-top-handler"></div>
　　<div class="right-top-handler"></div>
　　<div class="left-bottom-handler"></div>
　　<div class="right-bottom-handler"></div>
</div>

 

JS：

<script type="text/javascript">

　　var box = document.querySelector(".box");
　　var title = document.querySelector(".title");

　　// 当在title的位置按下的时候，盒子移动，移动到目标位置后，鼠标松开

　　// 三个事件 == 在title上面 发生 onmousedown , 在onmousedown按下基础上 onmousemove + onmouseup

　　title.onmousedown = function(evt)     
　　　　var x = evt.clientX; 　　//取得光标当前位置X
　　　　var y = evt.clientY; 　　//取得光标当前位置Y

　　　　var left = box.offsetLeft;  　　//当前盒子的坐标
　　　　var top = box.offsetTop;

　　　　window.onmousemove = function(evt)
　　　　　　var disX = evt.clientX - x;  　　//光标移动的距离
　　　　　　var disY = evt.clientY - y;　　

　　　　　　box.style.left = left + disX +"px";　　//光标移动的距离 + 
　　　　　　box.style.top = top + disY +"px";

　　　　

　　// 当鼠标抬起的时候，要把已经绑定的onmousemove + onmouseup 的事件移除

　　　　window.onmouseup = function()
　　　　　　window.onmousemove = null;
　　　　　　window.onmouseup = null;
　　　　
　　

　　function resize(dir)

　　　　var isLeft = dir.indexOf("left") != -1 ? true : false;

　　　　var isRight = dir.indexOf("right") != -1 ? true : false;

　　　　var isTop = dir.indexOf("top")!= -1 ? true :false;
　　　　var isBottom = dir.indexOf("bottom")!= -1 ? true:false;

　　　　var bar = document.querySelector("."+ dir + "-handler");

　　　　var box = document.querySelector(".box");

　　　　bar.onmousedown = function(evt)
　　　　　　var x = evt.clientX;
　　　　　　var y = evt.clientY;

　　　　　　var boxwidth = box.offsetWidth;
　　　　　　var boxheight = box.offsetHeight;

　　　　　　var left = box.offsetLeft;
　　　　　　var top = box.offsetTop;

　　　　window.onmousemove = function(evt)

　　　　　　var disX = evt.clientX - x;
　　　　　　var disY = evt.clientY -y;

　　　　if(isLeft)
　　　　　　box.style.width = boxwidth - disX +"px";
　　　　　　box.style.left = left + disX + "px";
　　　　　　
　　　　if(isRight)
　　　　　　box.style.width = boxwidth + disX + "px";
　　　　　　

　　　　if(isTop)
　　　　　　box.style.height = boxheight - disY + "px";
　　　　　　box.style.top = top + disY + "px";
　　　　　　
　　　　if(isBottom)
　　　　　　box.style.height = boxheight + disY +"px";
　　　　　　

　　　　
　　　　window.onmouseup = function()
　　　　　　window.onmousemove = null;
　　　　　　window.onmouseup = null;
　　　　
　　
　

　　resize("left");
　　resize("right");
　　resize("top");
　　resize("bottom");
　　resize("left-top");
　　resize("right-top");
　　resize("left-bottom");
　　resize("right-bottom")

解题思路：

1. 光标移动的距离，是盒子移动的距离。

2. 拖拽左边框的时候 固定右边，可以为 ：宽度减小了的 同时 距离左侧的距离也同时增大，即可形成右边固定不变。

上边框 同理。