当前位置:  开发笔记 > 编程语言 > 正文

Jquery写一个鼠标拖动效果实现原理与代码

近日项目中要做一个鼠标拖拽层的效果,于是手动使用Jquery做了一个,发出来跟大伙儿分享一下,并希望能得到高手的指点,如何有高手改进的话,在下不胜感激
近日项目中要做一个鼠标拖拽层的效果,于是手动使用Jquery做了一个,发出来跟大伙儿分享一下,并希望能得到高手的指点,如果哪位大侠觉得我的思路和代码不正确或者需要改进的话,希望能指点一二,在下感激不尽。

我的思路是这样的

1、在鼠标按下的时候,捕获鼠标的当前位置;

2、得到要移动对象的当前位置信息;

3、鼠标移动时,计算鼠标移动的距离,将这个距离更新到对象的位置,在我的代码中,我试用绝对定位来表示对象的位置;

4、当鼠标移出对象或者鼠标弹起的时候,则认为对象处于不能移动的状态。这个在我的代码中使用一个bool类型的变量isMouseDown表示,当这个变量为true的时候,则说明对象处于可移动状态,如果为false的时候,表示对象处于不可移动状态。鼠标移出对象或者弹出的时候,就将isMouseDown置为false。

好了,思路就是这样,下面将代码贴出来,如果我的思路中表达的不清楚的话,可以在代码中看出来:
复制代码 代码如下:




使用鼠标拖动层代码






鼠标放在这里拖动我


可以使用鼠标拖动的层




推荐阅读
牛尾巴2010
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有