这篇文章同样发布在我的GITHUB博客:[我的GITHUB博客](https://ZQ-jhon.github.io/2018/01/26/javascript Dom拖动 插件 putThere.js)
开源地址:
跪求各位看官给我点star吧 T.T,谢谢!
https://github.com/ZQ-jhon/putThere.js
原理及构想
关于拖动,如果不用html5的原生事件,怎样实现呢?
不妨先设想一下整个拖动的流程:
- 点击一个元素,鼠标按下,这个元素其实已经脱离了正常的定位,变成了绝对定位absolute
- 当鼠标移动到目标位置的时候,我们来捕获鼠标当前的坐标值clientX,clientY(相对于浏览器视口位置的相对值)
- 当松开鼠标,将鼠标的坐标值赋值给元素的left及top属性,如果此时,鼠标坐标值大于元素的left,或者top,说明元素在
向右下角移动,反之同理。
代码
想好其中的原理,代码也就不那么难写了。
//window监听
window.onmousedown=