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

鼠标拖拽事件是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