鼠标拖拽事件是web中使用频率极高的事件，之前写过的代码包括网上的代码，总存在各种各样的问题，包括拖拽体验差，松开鼠标后拖拽效果仍存在以及代码冗余过大等

本次我才用jQuery实现一个尽可能高效的拖拽效果，代码中有细节上的解释，就不多说了，代码很简洁

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="utf-8" />

            <title></title>

            <script src="JavaScript/jquery-1.8.0.min.js"></script>

            <style type="text/css">

                *{

                    margin:0;

                    padding: 0;

                }

                #pic{

                    width: 80px;

                    height: 80px;

                    position: absolute;

                    left: 0;

                    right: 0;  

                }

                a{

                    border: 1px solid red;

                }

            </style>

        </head>  

        <body>

            <div id="pic">

                <img src="img/bagua.gif" width="80px"/>拖动我试试

            </div>

            <script type="text/javascript">

                var drag=function(obj){  

                    obj.bind("mousedown",start);  

                    function start(event){

                        if(event.button==0){//判断是否点击鼠标左键

                            /*

                             * clientX和clientY代表鼠标当前的横纵坐标

                             * offset()该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

                             * bind()绑定事件，同样unbind解绑定，此效果的实现最后必须要解绑定，否则鼠标松开后拖拽效果依然存在

                             * getX获取当前鼠标横坐标和对象离屏幕左侧距离之差（也就是left）值，

                             * getY和getX同样道理，这两个差值就是鼠标相对于对象的定位，因为拖拽后鼠标和拖拽对象的相对位置是不变的

                             */

                            gapX=event.clientX-obj.offset().left;

                            gapY=event.clientY-obj.offset().top;

                            //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的

                            $(document).bind("mousemove",move);

                            //此处的$(document)可以改为obj

                            $(document).bind("mouseup",stop);  

                        }

                        return false;//阻止默认事件或冒泡

                    }

                    function move(event){

                        obj.css({

                            "left":(event.clientX-gapX)+"px",

                            "top":(event.clientY-gapY)+"px"

                        });

                        return false;//阻止默认事件或冒泡

                    }

                    function stop(){

                        //解绑定，这一步很必要，前面有解释

                        $(document).unbind("mousemove",move);

                        $(document).unbind("mouseup",stop);  

                    }

                }

                obj=$("#pic");

                drag(obj);//传入的必须是jQuery对象，否则不能调用jQuery的自定义函数

            </script>

        </body>

    </html>

本文转载自：http://blog.csdn.net/u013344815/article/details/72598890

完美实现鼠标拖拽事件，解决各种小bug，基于jquery的更多相关文章

  1. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  2. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  3. HTML5深入学习之鼠标跟随，拖拽事件

    知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover:  当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...

  4. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  5. CSharpGL(20)用unProject和Project实现鼠标拖拽图元

    CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...

  6. 【狼】unity 鼠标拖拽物体实现任意角度自旋转

    主要涉及函数 Input.GetAxis(“Mouse x”) 可取得鼠标横向(x轴)移动增量 Input.GetAxis(“Mouse y”) 可取得鼠标竖向(y轴)移动增量 通过勾股定理获取拖拽长 ...

  7. H5原生拖拽事件

    使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

  9. 鼠标拖拽定位和DOM各种尺寸详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. [RxJS] Add debug method to Observable in TypeScript

    Observable.prototype.debug = function(message: any) { return this.do( (next) => { if(!environment ...

  2. [Vue] Use Vue.js Watchers to Respond to Async Updates

    Use watchers to keep an eye on your data. Watchers are methods that are invoked when the specified a ...

  3. erlang一些参考资源

    1. erlang非业余研究 http://blog.yufeng.info/ 2.code.wang http://www.cnblogs.com/codew/ 3.码农生涯 http://www. ...

  4. BZOJ 3631 松鼠的新家 - 树链剖分 / 树上差分

    传送门 分析: 树链剖分:x->y,将x到y的路径加一,并将x端点的答案-1,最后统计答案. 树上差分:x->y,x+1,y+1,lca-1,fa[lca]-1,并将x打上标记,最后统计前 ...

  5. 善用Linux与Windows中的筛选功能及其他有用功能

    cmd中的检索目录结构是用 tree命令,检索本目录中这一级别的所有文件是dir,要是文件很多时需要用到检索功能 dir | find "abc" #####主要find之后要加双 ...

  6. KeePass v1.30

    Changes from 1.29 to 1.30: New Features:Refined application icons (thanks to Victor Andreyenkov).Add ...

  7. 如何在使Xcode打包iOS应用时自动增加编译号

    在红框标注的输入框中输入:真机调试编译成功增加 echo $CONFIGURATION if [ "Release" == "${CONFIGURATION}" ...

  8. LaunchImage启动黑屏－模拟器可以，但是真机黑屏

    名称和尺寸都是对的,就是不显示.结果美工重新做一张图片就行了,想了半天都没想到是图片本身等问题啊

  9. hbase 从hbase上读取数据写入到hdfs

    Mapper package cn.hbase.mapreduce.hb2hdfs; import java.io.IOException; import org.apache.hadoop.hbas ...

  10. hadoop 3.x org.apache.hadoop.security.AccessControlException: Permission denied: user=Administrator, access=WRITE, inode="/":tele:supergroup:drwxr-xr-x

    权限不足,上传文件时应当使用启动hadoop的账户,即在获取FileSystem时就应当指定用户 修改后的代码 public class Demo1 { public static void main ...