1. 拖动demo1-盒子可拖动
<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>拖动demo1-盒子可拖动</title>
<style>
.box {
width: 20px;
height: 20px;
background-color: rgb(247, 196, 196);
border: 1px solid rgb(252, 153, 153);
cursor: pointer;
position: relative;
}
</style>
</head>
<body>
<!-- 拖动的盒子 -->
<div class="box" id="drag">
</div>
<script>
let dragDom = document.getElementById('drag')
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
// 鼠标在移动盒子上按下
dragDom.onmousedown = function (e) {
console.log('鼠标按下事件')
dragDom.style.backgroundColor = 'rgb(196, 217, 247)'
dragDom.style.border = 'rgb(153, 196, 252)'
dragDom.style.cursor = 'move'
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX
const disY = e.clientY
// 获取到的值带px 正则匹配替换
let styL = null
let styT = null
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
} else {
styL = +sty.left.replace(/\px/g, '')
styT = +sty.top.replace(/\px/g, '')
}
document.onmousemove = function (e) {
e.preventDefault() // 移动时禁用默认事件
// 通过事件委托，计算移动的距离
const l = e.clientX - disX
const t = e.clientY - disY
// 移动当前元素
dragDom.style.left = `${
l + styL}px`
dragDom.style.top = `${
t + styT}px`
}
document.onmouseup = mouseUp
}
// 鼠标抬起
function mouseUp() {
console.log('鼠标抬起事件')
dragDom.style.backgroundColor = 'rgb(247, 196, 196)'
dragDom.style.border = 'rgb(252, 153, 153)'
dragDom.style.cursor = 'pointer'
document.onmousemove = null
document.onmouseup = null
}
dragDom.oncontextmenu = function () {
return false
}
</script>
</body>
</html>
2. 拖动demo2-有拖动范围
<!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>拖动demo2-有拖动范围</title>
<style>
.box {
width: 90%;
height: calc(100vh - 120px);
border: 1px solid red;
box-sizing: border-box;
display: flex;
margin-top: 20px;
margin-left: 60px;
}
.menu {
width: 200px;
height: 100%;
background-color: rgb(252, 213, 213);
}
.dragBox {
position: relative;
flex: 1;
background-color: rgb(252, 234, 213);
}
.dragDom {
position: absolute;
width: 30px;
height: 30px;
background-color: rgb(141, 188, 226);
top: 10px;
left: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="menu">
</div>
<div class="dragBox" id="dragBox">
<div class="dragDom" id="dragDom">
</div>
</div>
</div>
</body>
<script>
const dragBox = document.getElementById('dragBox')
const dragDom = document.getElementById('dragDom')
// 获取拖动区域的 边界
const dragBoxSty = dragBox.currentStyle || window.getComputedStyle(dragBox, null)
console.log(dragBox.getBoundingClientRect())
const boundaryL = dragBox.getBoundingClientRect().left
const boundaryT = dragBox.getBoundingClientRect().top
const boundaryR = dragBox.getBoundingClientRect().right
const boundaryB = dragBox.getBoundingClientRect().bottom
// 浏览器窗口的宽高
const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
console.log('boundaryL:', boundaryL, 'boundaryT:', boundaryT, 'boundaryR:', boundaryR, 'boundaryB:', boundaryB,
clientWidth, clientHeight)
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
// 鼠标按下
dragDom.onmousedown = function (e) {
dragDom.style.backgroundColor = 'rgb(247, 196, 196)'
dragDom.style.cursor = 'move'
// 获取元素当前距离可视区的距离
const disX = e.clientX
const disY = e.clientY
// 获取到的值带px 正则匹配替换
let styL = null
let styT = null
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
} else {
styL = +sty.left.replace(/\px/g, '')
styT = +sty.top.replace(/\px/g, '')
}
document.onmousemove = function (e) {
e.preventDefault() // 移动时禁用默认事件
// 通过事件委托，计算移动的距离
const l = e.clientX - disX
const t = e.clientY - disY
// 获取当前要设置的
const left = l + styL
const top = t + styT
if (e.clientX < boundaryL) {
dragDom.style.left = `0px`
} else if (e.clientX > boundaryR) {
dragDom.style.left = `${
dragBoxSty.width-sty.width}px`
} else {
dragDom.style.left = `${
left}px`
}
if (e.clientY < boundaryT) {
dragDom.style.top = `0px`
} else if (e.clientY > boundaryB) {
dragDom.style.top = `${
dragBoxSty.height}px`
} else {
dragDom.style.top = `${
top}px`
}
}
document.onmouseup = mouseUp
}
// 鼠标抬起
function mouseUp() {
console.log('鼠标抬起事件')
dragDom.style.backgroundColor = 'rgb(141, 188, 226)'
dragDom.style.cursor = 'pointer'
document.onmousemove = null
document.onmouseup = null
}
dragDom.oncontextmenu = function () {
return false
}
</script>
</html>
效果：盒子在橙色区域可拖动
4. demo3-拖动物体大于盒子
<!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>拖动demo3-拖动物体大于盒子</title>
<style>
.box {
width: 90%;
height: calc(100vh - 120px);
border: 1px solid red;
box-sizing: border-box;
display: flex;
margin-top: 20px;
margin-left: 60px;
}
.menu {
width: 200px;
height: 100%;
background-color: rgb(252, 213, 213);
}
.content {
flex: 1;
display: flex;
justify-content: center;
background-color: rgb(252, 234, 213);
}
.dragBox {
position: relative;
width: 600px;
height: 500px;
background-color: rgb(234, 252, 213);
border: 1px solid rgb(115, 221, 224);
overflow: hidden;
}
.dragDom {
position: absolute;
width: 900px;
height: 800px;
text-align: center;
line-height: 30px;
top: 0px;
left: 0px;
cursor: pointer;
}
.dragDom > img {
width: 900px;
height: 800px;
}
</style>
</head>
<body>
<div class="box">
<div class="menu"></div>
<div class="content">
<div class="dragBox" id="dragBox">
<div class="dragDom" id="dragDom">
<img src="./1.png" alt="" />
</div>
</div>
</div>
</div>
</body>
<script>
const dragBox = document.getElementById("dragBox")
const dragDom = document.getElementById("dragDom")
// 获取拖动区域的 边界
const dragBoxSty = dragBox.currentStyle || window.getComputedStyle(dragBox, null)
const dragDomSty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
// 浏览器窗口的宽高
const clientWidth = document.documentElement.clientWidth || document.body.clientWidth
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
// 鼠标按下
dragDom.onmousedown = function (e) {
// dragDom.style.backgroundColor = "rgb(247, 196, 196)"
dragDom.style.backgroundColor = "rgb(255, 254, 242)"
dragDom.style.cursor = "move"
// 获取元素当前距离可视区的距离
const disX = e.clientX
const disY = e.clientY
// 获取到的值带px 正则匹配替换
let styL = null
let styT = null
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes("%")) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100)
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100)
} else {
styL = +sty.left.replace(/\px/g, "")
styT = +sty.top.replace(/\px/g, "")
}
document.onmousemove = function (e) {
e.preventDefault() // 移动时禁用默认事件
// 通过事件委托，计算移动的距离
const l = e.clientX - disX
const t = e.clientY - disY
// console.log("移动的距离", l, t)
// 获取当前要设置的
const left = l + styL
const top = t + styT
// console.log("要设置的距离", left, top)
if (left > 0) {
dragDom.style.left = `0px`
} else if (left < -300) {
dragDom.style.left = `-300px`
} else {
dragDom.style.left = `${
left}px`
}
if (top > 0) {
dragDom.style.top = `0px`
} else if (top < -300) {
dragDom.style.top = `-300px`
} else {
dragDom.style.top = `${
top}px`
}
}
document.onmouseup = mouseUp
}
// 鼠标抬起
function mouseUp() {
console.log("鼠标抬起事件")
// dragDom.style.backgroundColor = "rgb(141, 188, 226)"
dragDom.style.background = "none"
dragDom.style.cursor = "pointer"
document.onmousemove = null
document.onmouseup = null
}
dragDom.oncontextmenu = function () {
return false
}
</script>
</html>
效果：拖动图片在中间盒子里显示区域内容
