在web开发中,鼠标拖拽效果非常常见,例如百度的登录页,点击登录会弹出一个窗口,并且这个窗口可以拖动;那么这样的拖拽效果如何实现呢 ?其实实现很简章,搞清楚他的原理就很容易了;首当其冲的,要涉及到鼠标的三个事件,分别为鼠标按下、移动、松开;在这三个事件里分别计算元素鼠标的位置即可;
rush:js;">
/*******
拖拽原理1:
拖拽状态 = 0
鼠标在元素上按下的时候 {
拖拽状态 = 1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}
鼠标在元素上移动的时候 {
如果拖拽状态是0就什么也不做。
如果拖拽状态是1, 那么
元素y = 现在鼠标y - 原来鼠标y + 原来元素y
元素x = 现在鼠标x - 原来鼠标x + 原来元素x
}
鼠标在任何时候放开的时候 {
拖拽状态 = 0
}
将以上思路翻译成JS代码就可以实现拖拽的效果了。
*******/
上面这个原理也可以演变为:
/*******
拖拽原理2:
拖拽状态 = 0
鼠标在元素上按下的时候 {
拖拽状态 = 1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
元素的偏移值X=元素的X-元素的offsetLeft
元素的偏移值Y=元素的Y-元素的offsetTop
}
鼠标在元素上移动的时候 {
如果拖拽状态是0就什么也不做。
如果拖拽状态是1, 那么
元素y = 现在鼠标y -元素的偏移值X
元素x = 现在鼠标x -元素的偏移值Y
}
鼠标在任何时候放开的时候 {
拖拽状态 = 0
}
将以上思路翻译成JS代码就可以实现拖拽的效果了。
*******/
上面两种思路其实是异曲同工,需要注意的是在移动事件里,还要处理元素边缘的位置,以防止元素被拖动的时候拖到浏览器以外的地方;直接来看代码:
代码一:
<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
Box" class="Box">