【原創】js實現一個可隨意拖拽排序的菜單導航欄

1.想做這個效果的原因主要是用在UC上看新聞發現他們的導航菜單很有趣。無聊的時候在哪划着玩了很久。所以就干脆自己寫一個。原效果如下

                                                                          

2.整體效果如下，在已推薦和未添加里面每個小方塊可以觸摸移動位置互換。未添加和已添加里面的小方塊位置可以拖放。

                                                                         

3.結構分析。整體結構用紅線框標出。可以分為三個部分。關注底部拖拽部分。一個div里面嵌套兩個div.定位關系如圖。本次教程之作一個拖拽框

                                     

1.好了，基本情況已經分析清楚先實現頁面樣式。

         <div class="wrap">
            <div class="menu ">財經</div>
            <div class="menu ">時尚</div>
            <div class="menu ">國際</div>
            <div class="menu ">娛樂</div>
            <div class="menu ">軍事</div>
            <div class="menu ">搞笑</div>
            <div class="menu ">科技</div>
            <div class="menu ">游戲</div>
            <div class="menu ">體育</div>
            <div class="menu ">美圖</div>
            <div class="menu ">推薦</div>
            <div class="menu ">社會</div>
            <div class="menu ">微信</div>
            <div class="menu ">健康</div>
            <div class="menu ">軍事</div>
            <div class="clear"></div>
        </div>

css

<style type="text/css">
            *{margin: 0;padding: 0;}
            .clear{clear: both;}
            .wrap{width: 380px;height: auto;zoom: 1;overflow: hidden;border: 1px solid #8E8E8E;margin-top:100px ;margin-left: 400px;padding-bottom: 20px;position: relative;}
            .menu{width: 70px;height: 30px;background-color: cornflowerblue;color: #FFFFFF;font-size: 16px;text-align: center;line-height: 30px;float: left;margin-left: 20px;margin-top: 10px;}
            .active{height: 28px;width: 68px;border: 1px dashed #8E8E8E;float: left;margin-left: 20px;margin-top: 10px;}
            .onclick{transform: scale(1.2);position: absolute;background-color:cornflowerblue ;line-height: 30px;height: 30px;width: 70px;text-align: center;color: #FFFFFF;}
        </style>

界面如下

樣式完成了現在開始寫js。

1.主要為鼠標事件

鼠標按下-鼠標移動-鼠標彈起

鼠標按下時 menu的定位變為absolute。獲取其在內部的坐標值

鼠標移動分兩種。鼠標按下時移動，所選菜單跟隨鼠標移動移動，鼠標移動到新的menu 上在其之前創建一個活動的空DIV

鼠標彈起 menu菜單位置改變，插入到新位置

<script type="text/javascript">
            $(function(){
                var action=false;     //定義一個全局變量來判斷鼠標動作，默認為false
                $(document).on("mousedown",".menu",function(){         //鼠標按下事件
                    action=true;
                    if($(".onclick").length<1){
                        var left=$(this).offset().left-$(".wrap").offset().left;      //獲取在wrap內的偏移量
                        var top=$(this).offset().top-$(".wrap").offset().top;
                        console.log(left,top);
                        $(this).before("<div class='active' id='old'></div>");        //鼠標按下時在原位置創建一個活動的空div
                        $(this).removeClass("menu").addClass("onclick").css({"left":left,"top":top});
                    }
//                    console.log(action);
                    
                })
//                console.log(action);
                $(document).on("mousemove",".wrap",function(event){                //wrap上的鼠標移動事件，menu 移動
                    if(action==true){
                        var x=event.pageX-$(".wrap").offset().left;                //獲取鼠標在wrap的偏移量
                        var y=event.pageY-$(".wrap").offset().top;
//                        console.log(x,y)
                        $(".onclick").css({"left":x+10,"top":y+10});               //補充內邊距
                        console.log(action)
                    }
                })
                $(document).on("mouseenter",".menu",function(){                   //鼠標移動到新的menu 上在其之前插入一個接受的div
                    if(action==true){
                        $(this).before("<div class='active' id='new'></div>")
                    }
                })
                $(document).on("mouseleave",".menu",function(){                   //鼠標離開，接受的div移除
                    if(action==true){
                        $("#new").remove();
                    }
                })
                $(document).on("mouseup",function(){                           //鼠標彈起時將移動的menu 放入新的接受div里，並移除原div位置上的空div
                    if($("#new").length>=1){
                        console.log($(".onclick").text());
                        $("#new").before("<div class='menu'>"+$(".onclick").text()+"</div>");
                        $("#new").remove();
                        $(".onclick").remove();
                        $("#old").remove();
                    }
                    else
                    {
                        console.log($(".onclick").text());
                        $("#old").before("<div class='menu'>"+$(".onclick").text()+"</div>");
                        $(".onclick").remove()
                        $("#old").remove();
                    }
                    action=false;
                })
            })
        </script>

一個粗糙的拖拉就出來了

http://htmlpreview.github.io/?https://github.com/zimuqi/drap/blob/master/home.html