原生Js拖拽事件

原生Js拖拽事件

开发工具与关键技术:DW
作者:Mr_恺
撰写时间:2019.05.12

在日常生活中,我们经常上网浏览点击某个东西它就跳出一个窗体,并且可以拖拽它动来动去,但你们有没有想过这个是怎样完成的呢?其实实现这个功能是有很多种方法,现在我用一个原生Js来做为一个例子。
先来Html布局:
原生Js拖拽事件
Css样式:
原生Js拖拽事件
布局效果:就把它当作一个窗体
原生Js拖拽事件
Js就是实现拖拽的关键:实现原生js拖拽事件是通过鼠标按钮被按下、鼠标被移动和鼠标按键被松开三个事件组合而成的。只要是根据在窗体内鼠标被按下的指针位置移动到鼠标被松开的指针位置,我们就计算出这一段距离,得出这一段距离把他设置给窗体的坐标位置。
原生Js拖拽事件
完成到了这一步,就可以说大功告成了,就可以把窗体拖来拖去,如果不是很了解的,可以通过控制台输出,来看看它的数值的变化,这样就能快速深入的了解了。

原生Js拖拽事件