在一个固定的容器里面模拟拖拽某个元素放在画布任意位置（拖拽模块大
2020-10-27 本文已影响0人
andcen
#说一下起因吧#
我在一个固定的画布（容器）上面要放一个组织结构图，我嫌滚动条不好看并且操作不方便。所以统一写了个在画布里面拖拽溢出容器的方法（顺便非溢出的也一起做了）。记录一下可能以后还要用，用也用得着。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽模块</title>
<style>
.main-div {
width: 600px;
height: 600px;
border: 1px solid #000000;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.box-div {
width: 100px;
height: 100px;
border-radius: 100px;
position: absolute;
background: #000;
}
</style>
</head>
<body>
<div class="main-div">
<div class="box-div" id="dragMoveDiv"></div>
</div>
<script>
var sL = 0
var sT = 0
function DragDiv(id){
let moveDiv = document.getElementById(id)
let parentMoveDiv = moveDiv.parentNode
let isDown = false
let x = 0
let y = 0
// 鼠标按下去
moveDiv.onmousedown = function(e) {
isDown = true
moveDiv.style.cursor = 'move';
//获取x坐标和y坐标
x = e.clientX
y = e.clientY
//获取左部和顶部的偏移量
sL = moveDiv.offsetLeft
sT = moveDiv.offsetTop
}
// 鼠标移动（我设置的是在window里面）
window.onmousemove = function(e) {
if (isDown === false) {
return;
}
//获取x和y 计算偏移量，sL，sT 是原来的初始位置，所以加上原来的位置。
let nx = e.clientX - x + sL
let ny = e.clientY - y + sT
// 如果超出父div的区域就以父div的边界为准
const compareWidthNum = parentMoveDiv.offsetWidth - moveDiv.offsetWidth
const compareHeightNum = parentMoveDiv.offsetHeight - moveDiv.offsetHeight
// x
if (compareWidthNum > 0 ) {
if (nx < 0) {
moveDiv.style.left = '0px'
} else if (nx > compareWidthNum) {
moveDiv.style.left = compareWidthNum + 'px'
} else {
moveDiv.style.left = nx + 'px'
}
} else {
if (nx > 0) {
moveDiv.style.left = '0px'
} else if (nx < compareWidthNum){
moveDiv.style.left = compareWidthNum + 'px'
} else {
moveDiv.style.left = nx + 'px'
}
}
// y
if (compareHeightNum > 0) {
if (ny < 0) {
moveDiv.style.top = '0px'
} else if (ny > compareHeightNum) {
moveDiv.style.top = compareHeightNum + 'px'
} else {
moveDiv.style.top = ny + 'px'
}
} else {
if (ny > 0) {
moveDiv.style.top = '0px'
} else if (ny < compareHeightNum) {
moveDiv.style.top = compareHeightNum + 'px'
} else {
moveDiv.style.top = ny + 'px'
}
}
}
// 鼠标抬上来
window.onmouseup = function(e) {
isDown = false
moveDiv.style.cursor = 'default'
}
}
// 传入拖拽元素的id执行拖拽方法
DragDiv('dragMoveDiv')
</script>
</body>
</html>
