<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 100px;
height: 100px;
background-color: brown;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
/* 创建类 */
class Drag {
/* 构造器 */
constructor(el) {
this.el = el
this.init();
}
/* 鼠标按下的方法 */
Down(e) {
/* 获取鼠标按下的位置 */
var x = e.offsetX;
var y = e.offsetY;
/* 绑定鼠标移动事件 */
document.onmousemove = this.Move.bind(this, x, y)
}
/* 鼠标移动的方法 */
Move(x, y, e) {
//盒子横坐标等于 与页面的距离-鼠标在盒子上按下的位置。
this.el.style.left = e.pageX - x + 'px'
//盒子纵坐标等于 与页面的距离-鼠标在盒子上按下的位置。
this.el.style.top = e.pageY - y + 'px'
}
/* 鼠标抬起的方法 */
Up() {
/* 解绑移动事件 */
document.onmousemove = null;
}
/* 绑定事件 */
init() {
/* 绑定按下事件 */
this.el.onmousedown = this.Down.bind(this)
/* 绑定抬起事件 */
document.onmouseup = this.Up;
}
}
/* 获取box */
var box = document.getElementById('box')
/* 调用 */
var a = new Drag(box);
</script>
</body>
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
