Blog Kategorileri

Son Eklenen Konular

Jquery Sortable Menü Örneği
Resim

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

html

 <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

javascript

        <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>



Eğer hatası var ise burdan belirtebilirsiniz. Zamanım oldukça düzenleyebilirim.
 

comments powered by Disqus