这篇博客详细记录了如何使用JavaScript实现元素的拖动和拖拽改变大小功能，重点在于理解并运用定位值、clientX/Y以及offsetX/Y等坐标属性。
注释可能不够详细，代码写的有点多，效果基本全部实现了。
记录定位值以及clientX,Y值和offsetX,Y值是关键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
/* cursor: e-resize; */
}
#parent {
width: 100%;
height: 600px;
background: pink;
position: relative;
}
#son {
width: 200px;
height: 200px;
background: orange;
position: absolute;
}
</style>
</head>
<body>
<div id="parent">
<div id="son"></div>
</div>
<script>
var parent = document.getElementById('parent');
var son = document.getElementById('son');
//保存值，以用于判断
var _Text = '';
//记录子级盒子点击的X点坐标
var cliX = 0;
//记录子级盒子点击的Y点坐标
var cliY = 0;
//记录子级盒子的宽
var cliW = 0;
//记录子级盒子的高
var cliH = 0;
//通过父级滑动事件触发子盒子移动
parent.onmousemove = function (e) {
//switch语句判断鼠标点击在什么位置
switch (true) {
//点击的位置在子级中间时执行移动操作
case _Text == 'center':
//记录盒子当前位置的距离左边与上边的距离
var yunLeft = e.clientX - cliX;
var yuntop = e.clientY - cliY;
//进行判断，以此确定边界值
if (yunLeft <= 0) {
yunLeft = 0;
}
if (yunLeft >= parent.offsetWidth - son.offsetWidth) {
yunLeft = parent.offsetWidth - son.offsetWidth;
}
if (yuntop <= 0) {
yuntop = 0;
}
if (yuntop >= parent.offsetHeight - son.offsetHeight) {
yuntop = parent.offsetHeight - son.offsetHeight;
}
son.style.left = yunLeft + 'px';
son.style.top = yuntop + 'px';
break;
//点击的位置在子盒子右边界时执行的操作
case _Text == 'right':
//因为是去做拉宽盒子的动作，所以只需要确定盒子的宽度即可。
son.style.width = e.clientX - son.offsetLeft + 'px'
break;
//点击的位置在子盒子下边界时执行的操作
case _Text == 'bottom':
//因为是去做拉高盒子的动作，所以只需要确定盒子的高度即可。
son.style.height = e.clientY - son.offsetTop + 'px'
break;
//点击的位置在子盒子左边界时执行的操作
case _Text == 'left':
//因为往左拉宽子级的时候，需要加上子级原来的宽。所以这里就用到了上面记录的宽；
//往左拉伸的时候，子级的clientX会越来越少，所以通过原来点击的值减去现在的X值，就可以求出子级变宽了多少
son.style.width = (cliX - e.clientX) + cliW + 'px';
son.style.left = e.clientX + 'px';
break;
//点击的位置在子盒子上边界时执行的操作
case _Text == 'top':
//因为往上拉宽子级的时候，需要加上子级原来的高。所以这里就用到了上面记录的高；
//往上拉伸的时候，子级的clientY会越来越少，所以通过原来点击的值减去现在的Y值，就可以求出子级变高了多少
son.style.height = (cliY - e.clientY) + cliH + 'px';
son.style.top = e.clientY + 'px';
break;
//点击的位置在子盒子左上边界时执行的操作
case _Text == 'zuoshang':
//左上拉伸的时候，高和宽都需要做出改变，所以在这里调用的是左边界和上边界的逻辑
son.style.width = (cliX - e.clientX) + cliW + 'px';
son.style.left = e.clientX + 'px';
son.style.height = (cliY - e.clientY) + cliH + 'px';
son.style.top = e.clientY + 'px';
break;
//点击的位置在子盒子左下边界时执行的操作
case _Text == 'zuoxia':
//这里调用的是左边界和下边界的逻辑
son.style.width = (cliX - e.clientX) + cliW + 'px';
son.style.left = e.clientX + 'px';
son.style.height = e.clientY - son.offsetTop + 'px'
break;
//点击的位置在子盒子右上边界时执行的操作
case _Text == 'youshang':
//这里调用的是右边界和上边界的逻辑
son.style.width = e.clientX - son.offsetLeft + 'px';
son.style.height = (cliY - e.clientY) + cliH + 'px';
son.style.top = e.clientY + 'px';
break;
//点击的位置在子盒子右下边界时执行的操作
case _Text == 'youxia':
//这里调用的是右边界和下边界的逻辑
son.style.width = e.clientX - son.offsetLeft + 'px';
son.style.height = e.clientY - son.offsetTop + 'px';
break;
}
}
//当点击子级时做的操作
son.onmousedown = function (e) {
//接受函数的返回值，以确定进行什么操作
var jieShou = jiLu(e.offsetX, e.offsetY, e.target.offsetWidth, e.target.offsetHeight);
switch (true) {
//点击的为中间时执行的操作；
case jieShou == 'center':
//改变值，以执行上边的操作
_Text = 'center';
//改变鼠标样式
son.style.cursor = 'move';
//记录点击时的offsetX与offsetY值
cliX = e.offsetX;
cliY = e.offsetY;
break;
//点击为右边界时执行的操作
case jieShou == 'right':
_Text = 'right';
son.style.cursor = 'e-resize';
break;
//点击为下边界时执行的操作
case jieShou == 'bottom':
_Text = 'bottom';
son.style.cursor = 's-resize';
break;
//点击为左边界时执行的操作
case jieShou == 'left':
_Text = 'left';
son.style.cursor = 'e-resize';
//记录点击时的clientX值与盒子的宽度。
cliX = e.clientX;
cliW = e.target.offsetWidth;
break;
//点击为上边界时执行的操作
case jieShou == 'top':
_Text = 'top';
son.style.cursor = 's-resize';
//记录点击时的clientY值与盒子的高度。
cliY = e.clientY;
cliH = e.target.offsetHeight;
break;
//点击为左上边界时执行的操作
case jieShou == 'zuoshang':
_Text = 'zuoshang';
son.style.cursor = 'se-resize';
//调用左边界和上边界的逻辑
cliY = e.clientY;
cliX = e.clientX;
cliH = e.target.offsetHeight;
cliW = e.target.offsetWidth;
break;
//点击为左下边界时执行的操作
case jieShou == 'zuoxia':
_Text = 'zuoxia';
son.style.cursor = 'ne-resize';
//调用左边界和下边界的逻辑
cliY = e.clientY;
cliX = e.clientX;
cliH = e.target.offsetHeight;
cliW = e.target.offsetWidth;
break;
//点击为右上边界时执行的操作
case jieShou == 'youshang':
_Text = 'youshang';
son.style.cursor = 'ne-resize';
cliY = e.clientY;
cliX = e.clientX;
cliH = e.target.offsetHeight;
cliW = e.target.offsetWidth;
break;
//点击为右下边界时执行的操作
case jieShou == 'youxia':
_Text = 'youxia';
son.style.cursor = 'se-resize';
cliY = e.clientY;
cliX = e.clientX;
cliH = e.target.offsetHeight;
cliW = e.target.offsetWidth;
break;
}
}
//当鼠标松开的时候进行的操作
parent.onmouseup = function (e) {
_Text = '';
cliX = 0;
cliY = 0;
son.style.cursor = '';
cliW = 0;
cliH = 0;
}
//通过这个函数以记录鼠标点到什么位置时返回对应的值
function jiLu(x, y, w, h) {
switch (true) {
case (x < 10 && y < 10):
return 'zuoshang';
case (x > w - 10 && y < 10):
return 'youshang';
case (x > w - 10 && y > h - 10):
return 'youxia';
case (x < 10 && y > h - 10):
return 'zuoxia'
case x < 10:
return 'left';
case x > w - 10:
return 'right';
case y < 10:
return 'top';
case y > h - 10:
return 'bottom';
default:
return 'center';
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
