完美实现鼠标拖拽事件，解决各种小bug，基于jquery

来源：互联网发布：淘宝开店拍照要求编辑：程序博客网时间：2024/06/07 14:08

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

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

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></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>

效果示意

阅读全文

7 0