Jquery Frameworks, sortable özelliğini kullanarak sürükle bırak menü'ler yapabilirsiniz. Özel bir script geliştiriyor ve sürükle bırak özelliğini kullanmak isteyebilirsiniz. Bunun için sortable nimettir bizim için.
Önce kullanacağımız dosyaları sayfamıza entegre ediyoruz.
<script src="js/jquery-1.11.1.min.js"></script>
<script src="jquery/jquery.sortable.js"></script>
<script src="jquery/jquery-ui.js"></script>
Menü oluşturalım ve bunlara değer verelim.
<ul id="listele">
<li id="listele_1">Anasayfa</li>
<li id="listele_2">Kurumsal</li>
<li id="listele_3">Hizmetlerimiz</li>
<li id="listele_4">Kampanyalar</li>
<li id="listele_5">Çözümlerimiz</li>
</ul>
Bunu mysql'den sayfaların id'sini çekerek, döngü içinde kullanarak otomatikleştirebiliriz. Böylelikle istediğiniz kadar sayfa ekleyin kolay bir şekilde listele_no eklenebilir.
Eğer sayfaları veri tabanından çekmiyorsanız for döngüsü ile sayfa sayısı kadar otomatik sayı üretebilir ve kullanabilirsiniz.
Safanızın <head> kısmında sortable kodlarımızı entegre ediyoruz.
<script type="text/javascript">
$(document).ready(function() {
$("#listele").sortable({ revert:'true', opacity:'0.8', placeholder:'ui-state-highlight',
update: function() {
var order = $(this).sortable('serialize');
$.post("kaydet.php",order,function(cevap){
});
}
});
});
</script>Daha sonra gelen sıralama değerlerini kaydet.php dosyamıza post ediyoruz. Şimdi kaydet dosyamızı açıp içine kodlarımızı yerleştirelim.
<?php
$kayit = $_POST['listele'];
if($kayit){
$sayi= 1;
foreach ($kayit as $newlist) {
//Db update işlemi başlatılıyor.
$update = $db -> query(" UPDATE fix_blog_cat SET sira='$sayi' WHERE id='$newlist' ");
//Db uptade işlemi Tamamlandı.
$sayi = $sayi +1;
}
}
?>Böylelikle Php ile menümüzün yeni sıralamalarını veri tabanımıza kayıt etmiş olduk. Veri tabanımızdaki tablomuzda "sira" isminde bir sütun olması gerekir ona dikkat etmelisiniz.
Jquery sortable ile menü sıralama işlemini bu şekilde yapmış olduk. Yeni sıralama veri tabanına kayıt edildi. Ekrana çekerken ise " Order by sira " olacak şekilde çekin. Yani "sira" sütununa göre çekecektir.
Konunun alındığı kaynak:
Jquery Sortable Kullanımı