JS DOM操作实现拖动效果
实现思路
首先画个绝对定位的div
监听mousedown mouseup mousemove
定义一个变量来标记是否按下
在Move中判断如果按下,则将鼠标位置赋值给div
按下时记录鼠标与div的相对位置,移动时减去这段距离
在move时阻止默认行为,防止拖动文字有Bug
监听blur事件,防止窗口失去焦点导致bug
- DOM
<style>
#demo {
width: 300px;
height: 300px;
background: red;
position: absolute;
}
</style>
<div id="demo">拖动</div>
- JavaSprit
<script>
let demo = document.querySelector('#demo')//待拖拽元素
let canMove = false //拖拽状态
let x = 0, y = 0 //鼠标位置
//监听按下鼠标事件
demo.onmousedown = function (e) {
x = e.pageX - demo.offsetLeft
y = e.pageY - demo.offsetTop
canMove = true //激活拖拽状态
}
//监听右击鼠标事件
demo.oncontextmenu = function (e) {
e.preventDefault()//阻止默认行为
}
//监听鼠标抬起事件
window.onmouseup = function () {
canMove = false//关闭拖拽状态
}
</script>
由于当实际操作时,窗口失去焦点会造成位置bug,所以需要监听blur事件来解决。
代码如下:
window.onblur = function () {//窗口失去焦点事件
canMove = false//关闭拖拽状态
}
通过监听mousemove标移动事件来阻止浏览器默认行为(让div中的文字不能被拖走),同时为了不让div拖到窗口外造成bug,所以要对它规定一个范围。
代码如下:
//监听鼠标移动事件
window.onmousemove = function (e) {
e.preventDefault();//阻止默认行为(字不能拖走)
if (canMove) {//对范围判断
let left = e.pageX - x
let top = e.pageY - y
if (left < 0) left = 0 //当距离左边小于0时 让它为0
if (top < 0) top = 0 //当距离上边小于0时 让它为0
//右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
let maxLeft = window.innerWidth - demo.offsetWidth
//下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
let maxTop = window.innerHeight - demo.offsetHeight
if (left > maxLeft) left = maxLeft
if (top > maxTop) top = maxTop
demo.style.left = left + 'px'
demo.style.top = top + 'px'
}
}