JavaScript 面向对象的拖拽
一、body
<div id="box"></div>
二、css
<style>
#box {
position: abaolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
</style>
三、JavaScript
<script>
class Drag{
constructor(el) {
this.el = el;
el.startOffset = null;
el.startPoint = null;
let move = (e) => {
this.move(e);
}
let end = (e)=>{
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', end);
}
el.addEventListener('mousedown', (e)=>{
this.start(e);
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', end);
})
}
start(e) {
let {el} = this;
this.startOffset = {
x: el.offsetLeft,
y: el.offsetTop
}
this.startPoint = {
x: e.clientX,
y: e.clientY
}
}
move(e) {
let {el, startOffset, startPoint} = this;
let nowPoint = {
x: e.clientX,
y: e.clientY
}
let dis = {
x: nowPoint.x - startPoint.x,
y: nowPoint.y - startPoint.y
}
el.style.left = startOffset.x + dis.x + 'px';
el.style.top =startOffset.y + dis.y + 'px';
}
}
let box = document.querySelector('#box');
let drag = new Drag(box);
</script>
