你的位置:首页 > 软件开发 > Java > javascript动画系列第一篇——模拟拖拽

javascript动画系列第一篇——模拟拖拽

发布时间:2016-09-22 21:00:08
×目录[1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容前面的话  从本文开始,介绍javascript动画系列。javascript本身是具有原生拖放功能的,但是由于兼容性问题,以及功能实现的方式,用的不是很广泛。javascript ...

javascript动画系列第一篇——模拟拖拽

×
目录
[1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容

  鼠标按下时,拖拽开始。鼠标移动时,被拖拽元素跟着鼠标一起移动。鼠标抬起时,拖拽结束

  所以,拖拽的重点是确定被拖拽元素是如何移动的

  假设,鼠标按下时,鼠标对象的clientX和clientY分别为x1和x2。元素距离视口左上角x轴和y轴分别为x0和y0

  鼠标移动的某一时刻,clientX和clientY分别为x2和y2

  所以,元素移动的x轴和y轴距离分别为x2-x1和y2-y1

  元素移动后,元素距离视口左上角x轴和y轴的位置分别为

  X = x0 + (x2-x1)  Y = y0 + (y2-y1)

原标题:javascript动画系列第一篇——模拟拖拽

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。