由于楼主最近一个项目中需要使用到拖拽加拉伸放大div的功能需求,而且楼主本人是后端的,在各个资源网站上下载拖拽拉伸实例,结果都不是很理想,有的单方向拉伸,不好用于拓展,局限性比较大,所以研究了一下拖拽拉伸的,自己写出了一个实例,由于本人水平有限,代码质量可能不高,小伙伴们可以在以上基础上进行修改,目前实例中左上角的拉伸还有bug ,伙伴们可以自行修复。废话不多说,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>div四周拉伸</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
position: relative;
}
#boo{
position: relative;
margin: 100px 200px;
width: 1200px;
height: 700px;
border: 1px solid #000;
}
.btx{
top: 200px;
left: 300px;
background: rgb(198, 214, 219);
height: 200px;
width: 300px;
position: absolute;
cursor: move;
}
.big-small{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: none;
}
.big-small-btn{
position: absolute;
width: 4px;
height: 4px;
border: 1px solid #000;
z-index: 9999;
}
.left-top{
top: -6px;
left: -6px;
cursor: nw-resize;
}
.left-center{
top: 50%;
left: -8px;
transform: translate(50%,0);
cursor: w-resize;
}
.left-bottom{
bottom: -6px;
left: -6px;
cursor: sw-resize;
}
.right-top{
right: -6px;
top: -6px;
cursor: ne-resize;
}
.right-center{
top: 50%;
right:-2px;
transform: translate(50%,0);
cursor:e-resize;
}
.right-bottom{
right: -6px;
bottom: -6px;
cursor: se-resize;
}
.top-center{
cursor: n-resize;
left: 50%;
top: -6px;
transform: translate(50%,0);
}.bottom-center{
left: 50%;
bottom: -6px;
transform: translate(50%,0);
cursor: s-resize;
}
</style>
</head>
<body>
<div id="boo">
<div class="btx">
</div>
<div class="btx" style="top:80px;"></div>
<div class="btx" style="left:80px;"></div>
<div class="btx" style="top:160px;"></div>
</div>
</body>
<script>
$(".btx").on("click",function(){
$(".btx").removeClass('box');
$(".big-small").remove()
$(this).addClass("box")
dargs('box','boo');
});
function dargs(classNmae,container){
var boxs = document.getElementsByClassName(classNmae)[0]; //获取元素
var x, y; //鼠标相对与div左边,上边的偏移
var isDrop = false;