完美實現鼠標拖拽事件，解決各類小bug，基於jquery

時間 2019-12-05

標籤完美實現鼠標事件解決各類 bug 基於 jquery 欄目 JQuery 简体版

原文原文鏈接

鼠標拖拽事件是web中使用頻率極高的事件，以前寫過的代碼包括網上的代碼，總存在各類各樣的問題，包括拖拽體驗差，鬆開鼠標後拖拽效果仍存在以及代碼冗餘過大等javascript

本次我才用jQuery實現一個儘量高效的拖拽效果，代碼中有細節上的解釋，就很少說了，代碼很簡潔css

    <!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/72598890html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。