原生js实现拖拽效果

Posted 2022-09-21 wshj120828

css样式布局：

html部分：

js主体部分：

接下来用混合继承实现box2移动时有边界的效果：

 

思路：1.实现拖拽效果主要有三个事件，当鼠标按下的时候，获取鼠标相对于事件发生元素的位置（offsetX/offsetY）;当鼠标移动的时候，利用鼠标指针相对于浏览器页面（或客户区）的坐标（clientX/clientY）,得到元素的left和top值（clientX/clientY-offsetX/offsetY）；当鼠标抬起的时候清除移动效果。

2.事件处理函数会使this指向触发事件的元素，使用bind改变this的指向（指向实例），会返回一个新函数，提前将移动和抬起事件的this改变保存在一个变量中，让移除的和调用的是同一个函数。

3.一个box有边界，一个box没有边界，就需要子元素继承父元素，然后修改子元素的move事件，这里用的是混合继承的方法，使用改变this指向的方法继承构造函数中的内容，使用原型继承来继承原型对象的内容。

4.边界值设定：不小于0；不大于可视宽度与元素本身宽度的差值。document.documentElement.clientWidth 为可视区域的宽度。