为元素添加拖动事件（含例子）
程序员文章站
2022-06-25 16:11:16
//张鑫旭大神function startDrag(triggerElement, targetElement) { //定义拖动事件 triggerElement.addEventListener('mousedown', function(event) { //按下添加鼠标移动和放下事件 var originMouseX, originMouseY, moveX, moveY; //鼠标xy坐标，鼠标移动多少 originMouseX =...
//张鑫旭大神
function startDrag(triggerElement, targetElement) { //定义拖动事件
triggerElement.addEventListener('mousedown', function(event) { //按下添加鼠标移动和放下事件
var originMouseX, originMouseY, moveX, moveY; //鼠标xy坐标，鼠标移动多少
originMouseX = event.clientX;
originMouseY = event.clientY;
triggerElement.style.cursor = "all-scroll"; //鼠标样式
document.addEventListener('mousemove', mouseMove, false)
document.addEventListener('mouseup', mouseUp, false)
function mouseMove(event) {
moveX = event.clientX - originMouseX
moveY = event.clientY - originMouseY
originMouseX = event.clientX
originMouseY = event.clientY
targetElement.style.marginLeft = moveX + targetElement.offsetLeft + 'px' //移动的距离加原来的距离 //left + absolute
targetElement.style.marginTop = moveY + targetElement.offsetTop + 'px'
// 防止选取文字
event.preventDefault();
triggerElement.onselectstart = function() {
return false;
}
} // mouseMove end
function mouseUp(event) {
triggerElement.style.cursor = "default"; //设置样式
document.removeEventListener('mousemove', mouseMove, false)
document.removeEventListener('mouseup', mouseUp, false)
} // mouseUp end
}, false)
};
/*来自于网友*/
拖动缩放例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sq-out {
text-align: center;
position: relative;
display: inline-block;
border: 1px solid #aaa;
height: 500px;
width: 500px;
}
.sq {
display: inline-block;
position: absolute;
/* position: relative; */
border: 1px solid #666;
/* min-width: 20px; */
/* min-height: 20px; */
}
.triggerElement {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.sq>div:not(.trigger-element) {
position: absolute;
/* position: relative; */
height: 5px;
width: 5px;
outline: 1px solid #666;
background: white;
}
.trigger-element {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.tl {
top: -3px;
left: -3px;
cursor: nw-resize;
}
.tr {
top: -3px;
right: -3px;
cursor: ne-resize;
}
.bl {
bottom: -3px;
left: -3px;
cursor: ne-resize;
}
.br {
bottom: -3px;
right: -3px;
cursor: nw-resize;
}
</style>
</head>
<body>
<div class="sq-out">
<div class="sq">
<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
<div class="trigger-element"></div>
</div>
</div>
<script>
var sqout = document.getElementsByClassName("sq-out")[0];
var triggerElement = document.getElementsByClassName("trigger-element")[0];
var sq = document.getElementsByClassName("sq")[0];
var tl = document.getElementsByClassName("tl")[0];
var tr = document.getElementsByClassName("tr")[0];
var bl = document.getElementsByClassName("bl")[0];
var br = document.getElementsByClassName("br")[0];
startDrag(triggerElement, sq);
startDrag(br, br, "br");
startDrag(bl, bl, "bl");
startDrag(tl, tl, "tl");
startDrag(tr, tr, "tr");
initPostion();
function initPostion() { //初始化
sq.style.top = "20px";
sq.style.left = "20px";
sq.style.bottom = "20px";
sq.style.right = "20px";
}
function startDrag(triggerElement, targetElement, position) { //定义拖动事件
triggerElement.addEventListener('mousedown', function(event) { //按下添加鼠标移动和放下事件
document.addEventListener('mousemove', mouseMove, false)
document.addEventListener('mouseup', mouseUp, false)
var originMouseX, originMouseY, moveX, moveY; //鼠标xy坐标，鼠标移动多少
originMouseX = event.clientX;
originMouseY = event.clientY;
function mouseMove(event) {
moveX = event.clientX - originMouseX; ///移动
moveY = event.clientY - originMouseY;
originMouseX = event.clientX;
originMouseY = event.clientY;
if (position == "tl") {
sq.style.top = (Number.parseInt(sq.style.top) + moveY) + "px";
sq.style.left = (Number.parseInt(sq.style.left) + moveX) + "px";
} else if (position == "tr") {
console.log(position);
sq.style.top = (Number.parseInt(sq.style.top) + moveY) + "px";
sq.style.right = (Number.parseInt(sq.style.right) - moveX) + "px";
} else if (position == "br") {
console.log(position);
sq.style.bottom = (Number.parseInt(sq.style.bottom) - moveY) + "px";
sq.style.right = (Number.parseInt(sq.style.right) - moveX) + "px";
} else if (position == "bl") {
console.log(position);
sq.style.bottom = (Number.parseInt(sq.style.bottom) - moveY) + "px";
sq.style.left = (Number.parseInt(sq.style.left) + moveX) + "px";
} else {
if (!((Number.parseInt(targetElement.style.bottom) - moveY) < 0) && !(moveY + targetElement.offsetTop < 0)) {
targetElement.style.top = ((moveY + targetElement.offsetTop)) + 'px'
targetElement.style.bottom = (Number.parseInt(targetElement.style.bottom) - moveY) + "px"
}
if (!((moveX + targetElement.offsetLeft) < 0) && !((Number.parseInt(targetElement.style.right) - moveX) < 0)) {
targetElement.style.right = (Number.parseInt(targetElement.style.right) - moveX) + "px"
targetElement.style.left = ((moveX + targetElement.offsetLeft)) + 'px' //移动的距离加原来的距离
}
}
// 防止选取文字
event.preventDefault();
triggerElement.onselectstart = function() {
return false;
}
} // mouseMove end
function mouseUp(event) {
document.removeEventListener('mousemove', mouseMove, false)
document.removeEventListener('mouseup', mouseUp, false)
} // mouseUp end
}, false)
};
</script>
</body>
</html>
本文地址：https://blog.csdn.net/qq_39121810/article/details/107338737