类似我们的桌面应用框，可以拉伸放大，可以拖拽移动
基于上一篇，我们至于要加上另外两边和另外三个角
只是剩下的拉伸，不仅仅要改变盒子的宽，还要改变left/top了
原本以为很简单的加个left就好了，结果应该有的限制还挺多，比如不能让盒子往另一边跑，上篇直接放的代码，这篇就一点一点来看吧，下篇会整理代码，重新放入
再来一遍h5,c3
<div class="box">
<div id="a"></div>
</div>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
left: 100px;
top: 20px;
width: 800px;
height: 800px;
border: 1px solid brown;
box-sizing: border-box;
}
#a {
width: 200px;
height: 200px;
background-color: #7FFFD4;
position: absolute;
left: 10px;
top: 10px;
}
然后来我们的操作
先获取元素，并且判断鼠标位置，决定做什么操作
鼠标移动，进行判断，看要做哪个操作
var box = document.querySelector(".box");
var a = document.querySelector("#a");
// 盒子宽高
var boxHeight = box.offsetHeight,
boxWidth = box.offsetWidth;
// 鼠标在盒子上移动时
a.onmousemove = e => {
// 盒子到屏幕左边，上边的距离，，和鼠标位置
let left = getAbsLeft(a),
top = getAbsTop(a),
x = e.clientX,
y = e.clientY,
width = a.offsetWidth,
height = a.offsetHeight;
// 右下角拉伸
if (width + left - x < 9 && height + top - y < 9) {
a.style.cursor = "se-resize";
this.onmousedown = function(e) {
lashen(e)
};
}
// 右上拉伸
else if (width + left - x < 9 && y - top < 9) {
a.style.cursor = "ne-resize";
this.onmousedown = function(e) {
youshang(e)
};
}
// 左下拉伸
else if (x - left < 9 && height + top - y < 9) {
a.style.cursor = "ne-resize";
this.onmousedown = function(e) {
zuoxia(e)
};
}
// 左上
else if (x - left < 9 && y - top < 9) {
a.style.cursor = "se-resize";
this.onmousedown = function(e) {
zuoshang(e)
};
}
// 右侧拉伸
else if (width + left - x < 9) {
a.style.cursor = "e-resize";
this.onmousedown = function(e) {
you(e)
};
}
// 下侧拉伸
else if (height + top - y < 9) {
a.style.cursor = "s-resize";
this.onmousedown = function(e) {
xia(e)
};
}
// 左侧拉伸
else if (x - left < 9) {
a.style.cursor = "e-resize";
this.onmousedown = function(e) {
zuo(e)
};
}
// 向上拉伸
else if (y - top < 9) {
a.style.cursor = "s-resize";
this.onmousedown = function(e) {
shang(e)
};
}
// 拖拽
else {
a.style.cursor = "move"
this.onmousedown = function(e) {
tuozhuai(e)
};
}
}
我们判断的时候这里用到了一个盒子到屏幕左边，上面的距离。
获取盒子到屏幕的距离
// 获取盒子到屏幕左方的距离
function getAbsLeft(obj) {
var l = obj.offsetLeft;
while (obj.offsetParent != null) {
obj = obj.offsetParent;
l += obj.offsetLeft;
}
return l;
}
// 获取盒子到屏幕上方的距离
function getAbsTop(obj) {
var top = obj.offsetTop;
while (obj.offsetParent != null) {
obj = obj.offsetParent;
top += obj.offsetTop;
}
return top;
}
然后继续，随便加张图理解一下吧，红色和紫色区域之间是拉伸，紫色里面是拖拽。我们将拉伸全部分开写
上
像上的时候，不仅要盒子不出界，当缩小到一定程度的时候还要让盒子不往下方跑
// 向上拉伸
function shang(e) {
var height = a.offsetHeight;
var t = a.offsetTop;
var nowY = e.clientY;
document.onmousemove = function(e) {
e = e || window.event;
var top = t - (nowY - e.clientY);
// 不能让方块往另外一边跑
top = top > t + height - 100 ?t + height - 100:top;
top = top < 0 ? 0 : top;
var bb = height + t - top;
// 高的最小
bb = bb <100?100:bb;
a.style.height = bb + "px";
a.style.top = top + "px";
}
}
左
左和上同理，改变方向就行
// 向左拉伸
function zuo(e) {
var width = a.offsetWidth;
var l = a.offsetLeft;
var nowX = e.clientX;
document.onmousemove = function(e) {
e = e || window.event;
var left = l - (nowX - e.clientX);
// 不能让方块往另外一边跑
left = left > l + width - 100 ? l + width - 100:left;
left = left < 0 ? 0 : left;
var aa = width + l - left;
// 宽的最小
aa = aa <100?100:aa;
a.style.width = aa + "px";
a.style.left = left + "px";
}
}
下，右
前面篇幅已经写了右边和下边了，比较简单，只用改变宽就行，就直接一起粘贴了
// 像下拉伸
function xia(e) {
var top = a.offsetTop;
var height = a.offsetHeight;
var nowY = e.clientY;
document.onmousemove = function(e) {
e = e || window.event;
var bb = height + e.clientY - nowY;
bb = bb + top > boxHeight ? boxHeight - top : bb;
// 高的最小
bb = bb <100?100:bb;
a.style.height = bb + "px";
}
}
// 向右拉伸
function you(e) {
var left = a.offsetLeft;
var width = a.offsetWidth;
var nowX = e.clientX;
document.onmousemove = function(e) {
e = e || window.event;
var aa = width + e.clientX - nowX;
//判断出界
aa = aa + left > boxWidth ? boxWidth - left : aa;
// 宽的最小
aa = aa <100?100:aa;
a.style.width = aa + "px"
}
}
各个角
然后就是各个角了，其实每个角，都是把相邻的两个边的内容放到一起
这里代码没做整理，比较乱，但是看起来方便
// 右上角拉伸
function youshang(e) {
var left = a.offsetLeft;
var top = a.offsetTop;
var width = a.offsetWidth;
var height = a.offsetHeight;
var t = a.offsetTop;
var nowX = e.clientX;
var nowY = e.clientY;
document.onmousemove = function(e) {
e = e || window.event;
// 右边
var aa = width + e.clientX - nowX;
aa = aa + left > boxWidth ? boxWidth - left : aa;
aa = aa <100?100:aa;
a.style.width = aa + "px";
// 上边
var top = t - (nowY - e.clientY);
// 不能让方块往另外一边跑
top = top > t + height - 100 ?t + height - 100:top;
top = top < 0 ? 0 : top;
var bb = height + t - top;
// 宽高的最小
bb = bb <100?100:bb;
a.style.height = bb + "px";
a.style.top = top + "px";
}
}
// 右下角拉伸
function lashen(e) {
var left = a.offsetLeft;
var top = a.offsetTop;
var width = a.offsetWidth;
var height = a.offsetHeight;
var nowX = e.clientX;
var nowY = e.clientY;
document.onmousemove = function(e) {
e = e || window.event;
var aa = width + e.clientX - nowX;
var bb = height + e.clientY - nowY;
aa = aa + left > boxWidth ? boxWidth - left : aa;
bb = bb + top > boxHeight ? boxHeight - top : bb;
// 宽高的最小
aa = aa <100?100:aa;
bb = bb <100?100:bb;
a.style.width = aa + "px"
a.style.height = bb + "px";
}
}
// 左下角拉伸
function zuoxia(e) {
var top = a.offsetTop;
var height = a.offsetHeight;
var nowY = e.clientY;
var width = a.offsetWidth;
var l = a.offsetLeft;
var nowX = e.clientX;
document.onmousemove = function(e) {
e = e || window.event;
var left = l - (nowX - e.clientX);
// 不能让方块往另外一边跑
left = left > l + width - 100 ? l + width - 100:left;
left = left < 0 ? 0 : left;
var aa = width + l - left;
aa = aa <100?100:aa;
a.style.width = aa + "px";
a.style.left = left + "px";
// 下
var bb = height + e.clientY - nowY;
bb = bb + top > boxHeight ? boxHeight - top : bb;
bb = bb <100?100:bb;
a.style.height = bb + "px";
}
}
// 左上角拉伸
function zuoshang(e) {
var height = a.offsetHeight;
var width = a.offsetWidth;
var t = a.offsetTop;
var l = a.offsetLeft;
var nowY = e.clientY;
var nowX = e.clientX;
document.onmousemove = function(e) {
e = e || window.event;
// 左
var top = t - (nowY - e.clientY);
// 不能让方块往另外一边跑
top = top > t + height - 100 ?t + height - 100:top;
top = top < 0 ? 0 : top;
var bb = height + t - top;
bb = bb <100?100:bb;
a.style.height = bb + "px";
a.style.top = top + "px";
// 上
var left = l - (nowX - e.clientX);
// 不能让方块往另外一边跑
left = left > l + width - 100 ? l + width - 100:left;
left = left < 0 ? 0 : left;
var aa = width + l - left;
aa = aa <100?100:aa;
a.style.width = aa + "px";
a.style.left = left + "px";
}
}
最后就是拖拽事件了
// 拖拽事件
function tuozhuai(e) {
// 盒子到父级的距离
let left = a.offsetLeft,
top = a.offsetTop;
// 获取盒子宽
var width = a.offsetWidth;
var height = a.offsetHeight;
//获取x坐标和y坐标
var nowX = e.clientX;
var nowY = e.clientY;
document.onmousemove = function(e) {
// 需要移动的 x y
var nx = e.clientX - nowX;
var ny = e.clientY - nowY;
//计算移动后的左偏移量和顶部的偏移量
var nl = left + nx;
var nt = top + ny;
// 判断出界
nl = nl + width > boxWidth ? boxWidth - width : nl;
nl = nl < 0 ? 0 : nl;
nt = nt + height > boxHeight ? boxHeight - height : nt;
nt = nt < 0 ? 0 : nt;
// 设置盒子left top
a.style.left = nl + 'px';
a.style.top = nt + 'px';
}
}
一切结束，鼠标弹起，鼠标移动事件清空
document.onmouseup = function() {
document.onmousemove = null;
}
这样基本上就和电脑上的窗口差不多了，可以拖动，也可以拉动放大缩小
代码较乱，下一篇整齐发送。
文章可能存在很多不足，忘各位大佬指正
1304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
