鼠标拖拽事件是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. mysql mha高可用架构的安装

    MMM无法全然地保证数据的一致性,所以MMM适用于对数据的一致性要求不是非常高.可是又想最大程度的保证业务可用性的场景对于那些对数据一致性要求非常高的业务,非常不建议採用MMM的这样的高可用性架构.那 ...

  2. Django日志器的使用

    Logging Mudel A quick logging primer Django uses Python’s builtin logging module to perform system l ...

  3. ahks

    !+F11:: newStr := clipboard ;newStr := RegExReplace(newStr, "<[^>]*>", "&quo ...

  4. [tmux] Copy and paste text from a tmux session

    One non-obvious, but extremely useful, feature in tmux is copy-pasting text between panes. This also ...

  5. expdp之后scp的惊险时刻

    今天在导出数据的时候.忽然就想起了上次导数据的惊险时刻. 当时导出数据,有40g.分盘./backup有几T的空间,非常easy.果断搞! 是daochu.dmp,导出后传到还有一个主机,还有一个主机 ...

  6. [Ramda] Refactor to Point Free Functions with Ramda using compose and converge

    In this lesson we'll take some existing code and refactor it using some functions from the Ramda lib ...

  7. iis配置反向代理oss

    windows利用iis配置反向代理实现ECS内网互通oss IIS实现反向代理 新建两个站点,端口分别使用 80 和 81,在DNS中新建A记录,指向该计算机(10.4.34.41) 配置过程如下: ...

  8. js获取input file路径改变图像地址

    版权声明:好歹是我写的或者总结的或者抄的,总待给我个名份吧~ https://blog.csdn.net/sangjinchao/article/details/52250318 html代码 < ...

  9. 【34.40%】【codeforces 711D】Directed Roads

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  10. Delphi中预编译指令

    本文转自 http://www.cnblogs.com/JackSun/archive/2010/12/20/1911250.html <Delphi下深入Windows核心编程>(附录A ...