完美实现鼠标拖拽事件，解决各种小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

posted on 2017-11-15 14:08 鱼塘总裁阅读(6284) 评论(2) 编辑收藏举报

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

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜