标签：com 拖拽 javascrip mic info height and color stop
样式：
.box{width:300px;height: 300px;background:pink;position: absolute;user-select: none} //大盒子 == user-select : 取消了用户选中文本
.title{width: 100%;height: 50px; background:#ccc;cursor:move;} //拖动title 大盒子移动
.left-handler{width:5px;height: 100%;background:green;position: absolute;top:0;left:0;cursor: ew-resize;} //左边框框
.right-handler{width:5px;height: 100%;background:green;position: absolute;top:0;right:0;cursor: ew-resize;} //右边框框
.top-handler{width: 100%;height: 5px;background:red;position: absolute;top:0;left:0;cursor: ns-resize;} //上边框框
.bottom-handler{width: 100%;height: 5px;background:red;position: absolute;bottom:0;left:0;cursor: ns-resize;} //下边框框
.left-top-handler{width: 10px;height: 10px;border-radius: 50%;background: yellow;position: absolute;top:0;left:0;cursor: nwse-resize;} //左上角
.right-top-handler{width: 10px;height: 10px;border-radius: 50%;background: yellow;position: absolute;top:0;right:0;cursor: nesw-resize;} //右上角
.left-bottom-handler{width: 10px;height: 10px;border-radius: 50%;background: yellow;position: absolute;bottom:0;left:0;cursor: nesw-resize;} //左下角
.right-bottom-handler{width: 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. 拖拽左边框的时候 固定右边，可以为 ：宽度减小了的 同时 距离左侧的距离也同时增大，即可形成右边固定不变。
上边框 同理。
标签：com 拖拽 javascrip mic info height and color stop
原文地址：https://www.cnblogs.com/rabbit-lin0903/p/11182368.html
