Jquery Sortable Menü Örneği

Sürükle bırak mantığı ile üst menü, alt menü ve sıralamasını içeren bir örnek hazırladım. Yönetim paneli veya benzeri bir uygulama için kullanılabileceğiniz bir yapı üretmeye çalıştım.

Örnek uygulamayı buraya tıklayarak görebilirsiniz.

Normalde her menü için 3 adet input içeriyor bunu çoğaltmak mümkün.

Html kod hali

 <form method="post">
        <div id="enTepe" class="indexAl skaps" style="position:relative;" data-ust="0">
            <div id="menu_1" class="sortable">
                <div class="menu">
                    menu 1
                    ID: <input type="text" name="menu[1][id]" value="1" class="menuid" />
                    Sıra: <input type="text" name="menu[1][sira]" value="0" class="sira" />
                    UstID <input type="text" name="menu[1][ustid]" value="0" class="ustid" />
                </div>
                <div class="indexAl skaps">
                    <!-- burdan -->
                </div>
            </div>

            <div id="menu_2" class="sortable">
                <div class="menu">
                    menu 2
                    ID: <input type="text" name="menu[2][id]" value="2" class="menuid" />
                    Sıra: <input type="text" name="menu[2][sira]" value="0" class="sira" />
                    UstID <input type="text" name="menu[2][ustid]" value="0" class="ustid" />
                </div>
                <div class="indexAl skaps">
                    <!-- burdan -->
                </div>
            </div>
        </div>
        <button type="submit">Bak</button>
</form>

menu[1][id], menu[1][sira], menu[1][ustid] şeklinde bulunan inputlarda 1 olan değer menünün veritabanından gelen kendi id değeri olucağını düşünerek hazırladım. Başlık ve diğer farklı değerler eklemek isterseniz aynı kurala uygun id, sira, utid şeklinde baslik, target, event tarzında menu[1][baslik], menu[1][target], menu[1][event] vb.. şeklinde atamalar yapılabilinir. Geri kalanı örneği kullanıcak olan kişilerin hayal gücüne kalmış.

Uygulama için jquery ve jquery ui kütüphanelerini kullandım.

Javascript örneği

<script type="text/javascript">
    $(document).ready(function(){

        $(".indexAl").sortable({connectWith: ".indexAl", cursor: 'move', placeholder: "gecmeAlani", update:function(){
           $("#enTepe > .sortable").each(function(i){
                var kendiId = $(this).attr("id");
                $(this).find(".menu").find(".sira").val(i+1);
                $(this).find(".menu").find(".ustid").val(0);
                menuleriSirala(kendiId);
           });  
        }
        }).enableSelection();

    });

    function menuleriSirala(bu){
            if($("#"+bu).find(".indexAl").find(".sortable").length != 0){
                var altKaps = $("#"+bu).find(".indexAl");
                var ustidsi = $("#"+bu).find(".menu").find(".menuid").val();
                //var toplamAlt = altKaps.children().length;
                $("#"+bu+" > .indexAl > .sortable").each(function(i){
                    $(this).find(".menu").find(".sira").val(i+1);
                    $(this).find(".menu").find(".ustid").val(ustidsi);
                    var kendiId = $(this).attr("id");
                    menuleriSirala(kendiId);
                });
            }       
    }
</script>

Burda ara