标签：鼠标 拖动 修改 按下 html let 尺寸 div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body,
html {
width: 100%;
height: 100%;
margin: 10;
}
#drag {
width: 200px;
height: 200px;
padding: 15px;
position: absolute;
left: 100px;
top: 100px;
border: #00cdcd 2px solid;
box-sizing: border-box;
}
</style>
<script type="text/javascript">
setTimeout(()=>{
let c = document.getElementById('drag')//需要调整尺寸的div
console.log(c,document.body);
document.body.addEventListener('mousemove', move)// body监听移动事件
c.addEventListener('mousedown', down)// 鼠标按下事件
document.body.addEventListener('mouseup', up)// 鼠标松开事件
let issize = false// 是否开启尺寸修改
let cX, cY // 鼠标按下时的坐标，并在修改尺寸时保存上一个鼠标的位置
let minW = 8,
minH = 8// div可修改的最小宽高
let dir = ''// 鼠标按下时的位置，使用n、s、w、e表示
function up() {// 鼠标松开时结束尺寸修改
issize = false
}
function down(e) {// 鼠标按下时开启尺寸修改
let d = getDir(e)
console.log('d',d);
// 当位置为四个边和四个角时才开启尺寸修改
if (d !== '') {
// 当位置为底部开启尺寸修改
// if (d === 's') {
issize = true
dir = d
cX = e.clientX
cY = e.clientY
}
}
function move(e) {// 鼠标移动事件
let d = getDir(e)
let cursor
if (d === '') cursor = 'default';
else cursor = d + '-resize';
// 修改鼠标显示效果
c.style.cursor = cursor;
// 当开启尺寸修改时，鼠标移动会修改div尺寸
if (issize) {
// 鼠标按下的位置在右边，修改宽度
if (dir.indexOf('e') !== -1) {
c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - cX)) + 'px'
cX = e.clientX
}
// 鼠标按下的位置在上部，修改高度
if (dir.indexOf('n') !== -1) {
c.style.height = Math.max(minH, c.offsetHeight + (cY - e.clientY)) + 'px'
cY = e.clientY
}
// 鼠标按下的位置在底部，修改高度
if (dir.indexOf('s') !== -1) {
c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - cY)) + 'px'
cY = e.clientY
}
// 鼠标按下的位置在左边，修改宽度
if (dir.indexOf('w') !== -1) {
c.style.width = Math.max(minW, c.offsetWidth + (cX - e.clientX)) + 'px'
cX = e.clientX
}
}
}
// 获取鼠标所在div的位置
function getDir(ev) {
let x, y, o, d;
d = '';
x = ev.offsetX;
y = ev.offsetY;
o = 10;
if (y < o) d += 'n';
else if (y > c.offsetHeight - o) d += 's';
if (x < o) d += 'w';
else if (x > c.offsetWidth - o) d += 'e';
return d;
}
},1000)
</script>
<body>
<div id="drag"></div>
</body>
</html>
标签：鼠标,
拖动,
修改,
按下,
html,
let,
尺寸,
div
From： https://www.cnblogs.com/dxy9527/p/17104558.html