Jquery Sortable Sürükle Bırak Menü Yapımı

Özel bir script veya bir içerik yönetim sistemi kodluyor olabilir ve bir yerde sürükle bırak ile nesneleri konumlandırmak isteyebilirsiniz. Bu sayede kullanıcının daha kolay bir şekilde işlem yapmasına olanak sağlayabiliriz. Javascript için geliştirilmiş olan Jquery kütüphanesinin içinde bulunan bir özellik olan “sortable” dan bahsedeceğiz. Nerelerde kullanabilir ve ne gibi fikirler ile kullanım sağlayabiliriz bunlardan bahsedeceğiz.

WordPress’te karşınıza çıkmıştır: Webmaster’ların çoğu WordPress kullanmıştır ve bu içerik yönetim sisteminin içinde bulunan sürükle bırak menüleri, bileşenleri kullanmıştır. Bizlere ne kullanım kolaylığı sağladığını söylememe gerek yok bunu hepiniz uygulayarak deneyim ettiniz. Peki bizler kendi projelerimizde sürükle bırak yöntemini nasıl kullanırız?

Bunun için Jquery kütüphanesinde sortable özelliğini kullanacağız. Ben size öncelikli olarak sortable ile kendi içerik yönetim sistemimde ne gibi uygulamalar yaptım onu göstermek istiyorum. Daha sonra kullanımı ile ilgili bilgiler vereceğiz.

İçerik yönetim sistemimi hala kodlamaya devam ediyorum ve benim için en önemli şeylerin başında blog kısmı geliyor. Gelişmiş bir blog sistemi kodluyorum ve blog kategorilerinin Jquery sortable ile sürükle bırak yöntemi ile sıralanmasını sağladım.

İçerik yönetim sistemimde WordPress’te rastladığınız “Components” yani “Bileşenler” kısmına benzer bir özellik geliştirdim. Bileşenler sayesinde sidebar, footer gibi kısımlara sortable ile sürükle bırak yöntemi ile aktif pasif olarak kullanım sağlayabiliyorum.

Görüyorsunuz, Jquery Sortable özelliğini çok kritik yerlerde kullanabiliyoruz. Sizde yazdığınız script’lerde veya başka kullanım gerektirebilecek yerlerde rahatlıkla kullanabilirsiniz. Şimdi gelelim bunu nasıl kullanacağımıza.

Öncelikli olarak sayfamızın en alt kısmına </body> tagını kapatmadan entegre edeceğimiz dosyalar şunlar ;

<!-- Jquery Sortable Path. -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="jquery/jquery.sortable.js"></script>
<script src="jquery/jquery-ui.js"></script>
<!-- Jquery Sortable Path End. -->

Bu dosyaları isimlerini Google amcaya yazarak indirebilirsiniz. Sayfaya entegre ettikten sonra örnek bir liste oluşturalım ve bunları sıralamayı gösterelim.

<ul id="listele">
   <li id="listele_1">Anasayfa</li>
   <li id="listele_2">Hakkımızda</li>
   <li id="listele_3">Ürünlerimi</li>
   <li id="listele_4">İletişim</li>
</ul>

Burada <ul> ile listeleme açtık ve her <li> oluşturduğumuzda listele_1, listele_2 gibi sayıyı arttırarak değerler veriyoruz. Yani her nesnenin birbirinden farklı değerleri oluyor. Veri tabanından sayfaları çekeceğiniz için “id” değerlerini buralara döngü içinde verebilirsiniz. Bu sayede istediğiniz kadar sayfa ekleyin otomatik olarak değer alacaktır.

Şimdi listemize Css ile değerler verelim. Yükseklik belirleyelim, listeleme type’ni kapatalım, border verelim, mause ile üstüne gelindiğinde taşıma simgesi meydana çıksın ve padding verelim.. Sayfamızın <head> kısmına yazıyoruz.

<style type="text/css">
 
   #listele li{ cursor:move; list-style-type: none; border:solid #CCC 1px; height: 40px; }
   #listele li:hover{ background:#FFF; }
   .padd {margin:3px 0px;}
 
</style>

Şimdi’de sortable kodlarımızı <head> tagları arasına yazalım ve buradan php dosyamıza post işlemini yapalım.

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

Yukarıdaki fonksiyonumuzda “listele” den gelen sıralamaları otomatik olarak alıyor ve değerleri kaydet.php dosyamıza yolluyoruz. Yine yukarıda bulunan revert, opacity, placeholder vs.. özellikler kullandık. Bunların ne işe yaradığını ve daha fazlasını ;

https://jqueryui.com/sortable/

Bölümünden bulabilirsiniz. Php ile post işlemine geçeceğim için makalenin daha fazla uzamasını istemiyorum. Şimdi size veri tabanı tablo yapısının nasıl olması gerektiğini gösterelim. Tablomuzun ismi “fix_blog_cat” dir. Siz farklı bir tablo ismi kullanabilirsiniz. Tablonuzda “sira” isminde bir sütun olması zorunludur. Örnek kullandığım tablo aşağıdadır.

Şimdi kaydet.php dosyasını açıp içine şu kodlarımızı yazacağız.

<?php

//Menünün yeni listesi kayıt ediliyor.
$listele = $_POST['listele'];
 
if($listele){
    $sayi= 1;
         foreach ($listele 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;
	}
    }
//Menü yeni listesi kayıt edildi.

Bu işlemden sonra Jquery Sortable ile sürükle bırak yöntemi ile menülerimizi sıralama işlemini tamamlamış olduk. Bu şekilde kullanım yapabilirsiniz. Makalemizin başında bahsettiğim “bileşenler” kısmı için başka bir zaman daha detaylı bir anlatım yapmaya çalışacağız. Çünkü o kısımda farklı işlevler var, nesneler arası geçişler ve transfer işlemleri olduğu için farklı bir zaman biriminde anlatım yapacağız.

Anlamadığınız yerler olur ise, yorum yazarak bizlerden destek alabilirsiniz.

Admin
Admin

Bilgiye ve eğitime önem veren, paylaşmayı seven bir insan.

3 Yorumlar
Tümünü göster En Yararlı En Yüksek Puan En Düşük Puan Yorumunuzu ekleyin
  1. Jquery Sortable konusunu daha önceden araştırmıştım ama php kısmında sorun yaşamıştım. Yani mysql veritabanıma kayıt esnasında sorun oluyordu ve sıralamalar doğru bir şekilde kayıt olmuyordu. Demek ki döngünün içinde bir kullanım yapıp, çektiğim değerleri bu şekilde sıralayacağım. Aşağı yukarı anladım şimdi bununla ilgili bir uygulama yapacağım, konu için teşekkür ederim bir sorun yaşarsam buradan size yazacağım.

  2. Javascript ile bu tarz şeylerin yapılması çok güzel bir şey. Bazen öyle yerlerde ihtiyaç duyuyoruz ama doğru düzgün doküman bulamadığımız için kullanımda sıkıntılar oluyor. Ama şu anda bu makaleyi okuduğum çok iyi oldu, jquery kütüphanesini kullanarak bileşenler tarzı bişey yapmayı düşünüyordum. WordPress’ten beğendiğim bir özellik olduğu için, kendimin e-ticaret sitesi içinde kullanmayı düşünüyorum.

  3. Hazır kütüphanelerin olması büyük bir sistem geliştirme sırasında gerçekten faydalı oluyor. Anlatım için teşekkürler.

Yorum Bırakın

Translate »
Kılavuz Yazılım
Logo