js用面向对象的方法实现全局拖拽
时间: 2023-07-12 14:29:16 浏览: 52
好的,我来为您解答。
首先,我们需要创建一个全局的拖拽对象,可以通过构造函数来实现:
```javascript
function Drag() {
this.dragging = false; // 记录是否正在拖拽
this.offsetX = 0; // 记录鼠标点击位置与拖拽对象左上角的距离
this.offsetY = 0;
}
Drag.prototype.init = function(element) {
var self = this;
element.onmousedown = function(event) {
self.dragging = true;
self.offsetX = event.clientX - element.offsetLeft;
self.offsetY = event.clientY - element.offsetTop;
};
document.onmousemove = function(event) {
if (self.dragging) {
element.style.left = event.clientX - self.offsetX + 'px';
element.style.top = event.clientY - self.offsetY + 'px';
}
};
document.onmouseup = function(event) {
self.dragging = false;
};
};
```
上面的代码中,Drag 构造函数定义了三个属性,分别是 dragging、offsetX 和 offsetY,分别用来记录是否正在拖拽、鼠标点击位置与拖拽对象左上角的水平距离和垂直距离。
init 方法接收一个参数 element,表示需要实现拖拽效果的元素。在该方法中,我们为元素的 mousedown、mousemove 和 mouseup 事件分别绑定了处理函数。当鼠标按下时,设置 dragging 为 true,并记录鼠标点击位置与元素左上角的距离;当鼠标移动时,如果正在拖拽,则根据当前鼠标位置和点击位置以及元素左上角的位置计算出新的位置,并设置为元素的 left 和 top 属性;当鼠标抬起时,设置 dragging 为 false。
接着,我们可以通过上面定义的 Drag 对象来实现全局拖拽:
```javascript
var drag = new Drag();
drag.init(document.getElementById('element')); // 将需要拖拽的元素传入 init 方法
```
在上面的代码中,我们首先创建了一个 Drag 对象,并调用 init 方法来初始化拖拽效果。需要拖拽的元素应该以参数的形式传入 init 方法中。
希望我的回答对您有所帮助!