HTML代码:
<div id="div1"></div><!--移动区域-->
css样式:
html,body{
margin: 0;
padding: 0;
}
#div1{
position: absolute;
width: 100px;
height: 100px;
background-color: #000;
}
JS逻辑代码:
class Drag {
constructor(id) {
this.oDiv = document.querySelector(id) // 当前的元素
this.disX = 0
this.disY = 0
this.init()
}
init() {
this.oDiv.onmousedown = function(ev) { // 元素内按下鼠标
this.disX = ev.clientX - this.oDiv.offsetLeft // 点击的那个点横坐标-元素距离左侧的距离
this.disY = ev.clientY - this.oDiv.offsetTop
document.onmousemove = this.fnMove.bind(this)
document.onmouseup = this.fnUp.bind(this)
return false
}.bind(this)
}
fnMove(ev) {
this.oDiv.style.left = ev.clientX - this.disX + 'px'
this.oDiv.style.top = ev.clientY - this.disY + 'px'
}
fnUp() {
document.onmousemove = null
document.onmouseup = null
}
}
new Drag('#div1')