盒子拖拽拉伸（和窗口一样的功能）
盒子拖拽拉伸（和窗口一样的功能）
前面已经写了，这里只是整理了一下代码，就直接粘贴代码了
我的完整文件已经上传。感兴趣可以直接下载来看。和这个代码是一样的
地址也放在这里了直接查看代码
若只想要拖拽事件，只需要将函数中的tuozhuai（）取出。
若只想要拉伸，将direction == "no"时的鼠标按下事件改为null即可
实现功能的函数
// 第一个参数是要改变的盒子，第二个参数是限制他的盒子
// 要改变的盒子要有定位
function change(a,box,minwidth,minheight){
// 盒子宽高
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) {
down("se-resize", "youxia")
}
// 右上拉伸
else if (width + left - x < 9 && y - top < 9) {
down("ne-resize", "youshang");
}
// 左下拉伸
else if (x - left < 9 && height + top - y < 9) {
down("ne-resize", "zuoxia");
}
// 左上
else if (x - left < 9 && y - top < 9) {
down("se-resize", "zuoshang");
}
// 右侧拉伸
else if (width + left - x < 9) {
down("e-resize", "you");
}
// 下侧拉伸
else if (height + top - y < 9) {
down("s-resize", "xia");
}
// 左侧拉伸
else if (x - left < 9) {
down("e-resize", "zuo");
}
// 向上拉伸
else if (y - top < 9) {
down("s-resize", "shang");
}
// 拖拽
else {
down("move", "no");
}
}
// 鼠标样式，及按下事件
function down(cursor, direction) {
a.style.cursor = cursor;
if (direction == "no") {
this.onmousedown = function(e) {
tuozhuai(e)
};
} else {
this.onmousedown = function(e) {
lashen(e,direction);
};
}
}
// 获取盒子到屏幕左方的距离
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 you(e, left, top, width, height, nowX, nowY) {
var aa = width + e.clientX - nowX;
aa = aa + left > boxWidth ? boxWidth - left : aa;
// 宽的最小
aa = aa < minwidth ? minwidth : aa;
a.style.width = aa + "px";
}
// 下
function xia(e, left, top, width, height, nowX, nowY) {
var bb = height + e.clientY - nowY;
bb = bb + top > boxHeight ? boxHeight - top : bb;
// 高的最小
bb = bb < minheight ? minheight : bb;
a.style.height = bb + "px";
}
// 上
function shang(e, left, top, width, height, nowX, nowY) {
var t = top - (nowY - e.clientY);
// 不能让方块往另外一边跑
t = t > top + height - minheight ? top + height - minheight : t;
t = t < 0 ? 0 : t;
var bb = height + top - t;
// 高的最小
bb = bb < minheight ? minheight : bb;
a.style.height = bb + "px";
a.style.top = t + "px";
}
// 左
function zuo(e, left, top, width, height, nowX, nowY) {
var l = left - (nowX - e.clientX);
// 不能让方块往另外一边跑
l = l > left + width - minwidth ? left + width - minwidth : l;
l = l < 0 ? 0 : l;
var aa = width + left - l;
// 宽的最小
aa = aa < minwidth ? minwidth : aa;
a.style.width = aa + "px";
a.style.left = l + "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';
}
}
//拉伸事件
function lashen(e,direction){
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;
if (direction == "shang") {
shang(e, left, top, width, height, nowX, nowY);
} else if(direction == "xia"){
xia(e, left, top, width, height, nowX, nowY);
}else if(direction == "zuo"){
zuo(e, left, top, width, height, nowX, nowY);
}else if(direction == "you"){
you(e, left, top, width, height, nowX, nowY);
}else if (direction == "youxia") {
xia(e, left, top, width, height, nowX, nowY);
you(e, left, top, width, height, nowX, nowY);
}else if (direction == "youshang") {
shang(e, left, top, width, height, nowX, nowY);
you(e, left, top, width, height, nowX, nowY);
}else if (direction == "zuoxia") {
xia(e, left, top, width, height, nowX, nowY);
zuo(e, left, top, width, height, nowX, nowY);
}else if (direction == "zuoshang") {
zuo(e, left, top, width, height, nowX, nowY);
shang(e, left, top, width, height, nowX, nowY);
}
}
}
document.onmouseup = function() {
document.onmousemove = null;
}
}
调用与准备
var box = document.querySelector(".box");
var a = document.querySelector("#a");
change(a,box,100,100);
我的html和css3,
<div class="box">
<div id="a">div>
div>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
left: 100px;
top: 20px;
width: 900px;
height: 900px;
border: 1px solid brown;
box-sizing: border-box;
}
#a {
width: 300px;
height: 300px;
background-color: #7FFFD4;
position: absolute;
left: 300px;
top: 300px;
}