对同一盒子拖拽位移、缩放，这其实是不符合js的逻辑的，位移和拖拽必然会互相影响，所以需要在布局上略加调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.resize-box {
width: 300px;
height: 300px;
position: absolute;
left: 50px;
top: 50px;
cursor: move;
background-color: #ccc;
border: 1px solid #000;
}
.resize {
width: 20px;
height: 20px;
background-color: #000;
position: absolute;
right: 0;
bottom: 0;
z-index: 100;
cursor: se-resize;
}
</style>
</head>
<body>
<div class="resize-box">
<div class="resize"></div>
</div>
<script>
const resizeBox = document.querySelector('.resize-box');
const resize = document.querySelector('.resize');
let isResizing = false;
let startX, startY, startWidth, startHeight;
resize.onmousedown = function(e) {
preventFun(e);
isResizing = true;
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(getComputedStyle(resizeBox).width, 10);
startHeight = parseInt(getComputedStyle(resizeBox).height, 10);
document.onmousemove = function(e) {
preventFun(e);
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
resizeBox.style.width = (startWidth + deltaX) + 'px';
resizeBox.style.height = (startHeight + deltaY) + 'px';
};
document.onmouseup = closeDragElement;
};
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
preventFun(e);
e.preventDefault();
e = e || window.event;
pos3 = e.clientX;
pos4 = e.clientY;
document.onmousemove = elementDrag;
document.onmouseup = closeDragElement;
}
function elementDrag(e) {
preventFun(e);
e = e || window.event;
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
dragElement(resizeBox);
function preventFun(e) {
// 阻止默认事件
e.preventDefault();
e.returnValue;
// 阻止冒泡
if (e && e.stopPropagatio) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
</script>
</body>
</html>
位移还是通过自身来实现，缩放则是通过加一个盒子间接操作，这样互相之间不会冲突，当然还要加上去除冒泡 和 默认事件，这样就可以了
