jQuery sortable kullanımı

Kısa bir aradan sonra yazılarıma devam ediyorum geçen gün bir projede lazım oldu kullanıcı oluşturduğu menülerin sırasını kendisi belirlemek istedi php ile standart menuler listelettirilir yan tarafına hangi sırada olacaksa sıra numarası yazılır veritabanına kaydedilir ve listelettirilirken ona göre listelenir.

• Anasayfa
• Hakkımızda
• Ürünler
• İletişim

yukarıda sıradan bir listeleme yaptık, ama ben bunun yanına numaralandırma yaparak kullanıcı yazarak değilde kullanıcı aktif olarak direkt mouse ile üstünde taşıma yaparak sıralamasını istiyorum.

jQuery UI saolsun bize bu nimetlerden yararlanmamız için yeterli bilmemiz gereken tek fonksiyon .sortable() 
ben size bugun sortable fonksiyonu nasıl kullanılır bundan bahsedicem bir sonraki yazımızda ise standart bir menü sıralama uygulaması yaparız.

jQuery UI ve diğer jQuery dosyalarımızı sayfamıza ekledikten sonra bir liste oluşturalım.

<ul id="liste">

    <li>Anasayfa</li>

    <li>Hakkımızda</li>

    <li>İletişim</li>

    <li>Ivır Zıvır</li>

</ul>

<div id="sonuc"></div>

Şimdi bunun üstünde sıralamada değişiklik yapmak artık çok kolay hemen gösterelim.

<script type="text/javascript" src="jquery-1.9.1.js"></script>

<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript">

$(document).ready(function(e) {

 $("#liste").sortable();

});

Artık etiketlerin üstünde mouse ile surukle bırak yaparak değişiklik yapabilirsiniz.

 Bu kadar kolay mıydı ? evet bu kadar kolay ama herşey bununla bitmiyor

• Menuler sıralanırken.. (activate)
• Menuler sıralanırken yerlerının değişmesi (change)
• Menüler Sıralandıktan sonra (beforeStop)
• Sürüklenme yerleri (Sağa sola - yukarı aşağı) (axis)
• Taşınabilecekleri belirleme (disabled)
• Farklı nesneler arasında taşıma yapma (connectWith)
• Cursor: taşırken mouse'nin aldığı görünüm (cursor)
• Delay: gecikme süresi (delay)
• Seçilen nesne altında istenilen nesneyi sürükleme (items)
• revert: geri dönüş (revert)

gibi özelliklerimiz var bunlar en çok kullanılan özellikler yanlarına uygulamada kullanacağımız isimlerini yazdık.

Hemen kullanına geçersek sırasıyla

activate

$(document).ready(function(e) {
     $("#liste").sortable({

           activate: function(){
  $("#sonuc").text("Değiştirmek İçin Sürükleyin");
  }
 });
});

fonksiyon halinde çalışır fonksiyon içine gerekli kodlar yazılır.

change

$(document).ready(function(e) {

 $("#liste").sortable({
  change:function(){
   $("#sonuc").text("Nesneler Yer Değişti");
   }
  });
});

Buda fonksiyon halinde çalışır değişme olduğunda kodlar içine yazılır.

beforeStop
Bu ise herşey tamamlandıktan sonra yapılacak işlemleri belirtir fonksiyon belirterek çalışır

$(document).ready(function(e) {
 $("#liste").sortable({
  beforeStop :function(){
   $("#sonuc").text("Nesneler Yer Değiştirmesi Tamamlandı");
   }
  });
});

Şeklinde basit bir kullanımı vardır.

axis

Basit ama bazen sıkıntı yaratan konulardan birisi nesnelerin sürüklenme yönleridir, axis sayesinde nesnelerin x ve y şeklinde yer belirterek hangi yöne gideceğini belirtiriz.

$(document).ready(function(e) {

 $("#liste").sortable({

  axis:"y"

  });



});

Şeklinde basit bir kullanımı vardır.

Not: x sağa ve sola, y ise yukarı aşağı gitmesini sağlar

disabled

Bazen o anki işleme göre nesnelerin taşınmaması lazımdır bunun sayesinde çözüyoruz.

$(document).ready(function(e) {
 $("#liste").sortable({
  disabled:true
  });
});

Kullanımı bu şekildedir.

connectWith

Geldik şimdi ince bir yere bu özellik bazı yerlerde hayat kurtarır en çok kullanılan özellikler arasındadır.
Peki nedir bu ? bu 2 yada daha fazla sıralama arasında nesne alışverişini sağlar yani ben #liste'den aldığım nesneyi #menu icerisine bırakabilirim.

Kullanımına gelicek olursak

$(document).ready(function(e) {
 $("#liste").sortable({
  connectWith:"#liste2"
  });
 
 $("#liste2").sortable({
  connectWith:"#liste"
  });

});

Şeklinde kullanılır. Burda #liste'ye dedikki #liste2'den gelen nesneleri kabul et, aynı şekil #liste2'ye dedik.

cursor
Bu özellik ise taşınırken mouse'nin alacağı görünümdür(pointer,move vs.)

$(document).ready(function(e) {
 $("#liste").sortable({
          cursor:"move"
  });
});

Şeklinde kullanılır.

delay
Sık sık kullanılmasada bazen etkili olabiliyor. Bu ise nesnenin ne kadar zaman sonra sürüklenmeye başlayacağını söyler

$(document).ready(function(e) {
 $("#liste").sortable({
          delay:1000
  });
});

mesela yukarıda nesnenin 1 saniye sonra hareket etmesini söyledik.

items 
Bu özellik sayesinde hangi nesnenin taşınabileceğini belirtebiliyoruz.

$(document).ready(function(e) {
 $("#liste").sortable({
          items:"li"
  });
});

Yukarıda sadece li etiketlerini taşıyabileceğini belirttik.

revert
Ve son olarak revert. Nesnenin geri dönüş yapıp yapmayacağını belirtir

$(document).ready(function(e) {
 $("#liste").sortable({
          revert:true
  });
});

Şeklinde kullanılır.

Yukarıda anlattıklarımın tümünü aşağıdan result tıklayarak önizleme yapabilirsiniz.