• Şuradasınız
  • Anasayfa
  • JQuery
  • Jquery ile Sıralanabilir Nesne Grupları Yaratma – Sortable

Jquery ile Sıralanabilir Nesne Grupları Yaratma – Sortable

Merhaba, bu yazımda jquery ile sortable nesne grupları oluşturmayı anlatmaya çalışacağım.

Dikkat ettiyseniz nesne grupları diyorum. Yani birden fazla, aynı cinsten nesneyi kendi aralarında sıralamaya çalışacağız. Daha anlaşılır olması açısından buradaki örneğe bakınız. Örnekte <li> etiketleri birbirleri arasında yer değiştirebiliyor. Sürüklenebilir olması açısıyla draggable nesnelere de benzemiyor değiller.

Ne yapmaya çalıştığımızı anlattıktan sonra işin detayına girelim, öncelikle gerekli kütüphaneleri sayfamıza entegre etmemiz gerekiyor.

<script src="jquery-1.6.1.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.sortable.js"></script>

Gerekli kütühaneleri sayfamıza ekledikten sonra artık sortable fonksiyonunu kullanabilir hale geldik. O halde bir liste oluşturup onlara sortable fonksiyonunu uygulayalım. Bu işlemi yaparken de sort olayından da yararlanarak bir uyarı mesajı verelim.

$("#sirala").sortable({
   sort : function(){
      $("body").find("p").html("Sort olayı gerçekleşti.");
   }
});

Örneği buradan inceleyebilirsiniz.

Sortable fonksiyonu nesne grupları için kullanılan bir fonksiyondur. Eğer bir elementin alt etiketleri(tagları) yoksa sortable fonksiyonu çalışmayabilir. Bir <ul> etiketi altındaki <li> etiketleri sıralanabilir, bir <div> etiketi altındaki <p> etiketleri sıralanabilir ya da bir <div> içindeki <div> etiketleri kendi aralarında sıralanabilirler. İşte ana etiketin altında hangi etiketlerin kendi aralarında sıralanacağını belirtmek için items argümanı oluşturulmuştur. items argümanı ile bir örnek yapalım.

$(".sirala").sortable({
   items : "div"
});

Bu örnekte .sirala sınıfının altındaki <div> taglarına sortable fonksiyonu uygulanmıştır.
Örneği buradan inceleyebilirsiniz.

Sortable fonksiyonunun diğer argümanlarına geçelim.

axis argümanı ile sıralayacağınız etiketlerin hangi eksende yer değiştirebilir olacağını belirtebilirsiniz.

$("#sirala").sortable({
   axis : "x"
});
$("#sirala_2").sortable({
   axis : "y"
});

Sonuca buradan bakabilirsiniz.

cancel argümanı ile sürüklenen elemanın neresinden sürüklenemeyeceğini, handle argümanı ile de neresinden sürüklenebileceğini belirtenilirsiniz.

$("#sirala").sortable({
   cancel : "span"
});
$("#sirala_2").sortable({
   handle : "span"
});

Örnekte <li> etiketlerinin içine <span> etiketleri yerleştirilmiş ve bu etiketlere cancel ile handle argümanları uygulanmıştır. Sonuca buradan bakabilirsiniz.

revert argümanı ile çektiğiniz nesnenin eski yerine ya da sizin belirttiğiniz yere geri gelmesini sağlayabilir, opacity argümanı ile çektiğiniz nesnenin şeffaflığını, opacity değerini ayarlayabilir ve cursor argümanı ile de mouse imlecinin şeklini değiştirebilirsiniz.

$("#sirala").sortable({
   revert : "true",
   cursor : "move",
   opacity : 0.5
});

Örneği buradan inceleyebilirsiniz.

delay argümanı ile zaman olarak gecikme, distance argümanı ile mesafe olarak gecikme sağlayabilir ve grid argümanı ile de belirttiğiniz mesafedeki uzaklığa hareket edebilirsiniz.

$("#sirala").sortable({
   delay : 500
});
$("#sirala_2").sortable({
   distance : 50
});
$("#sirala_3").sortable({
   grid : [10,10]
});

Sonuca buradan bakabilirsiniz.

placeholder argümanı ile sıraladığınız nesneleri bırakacağınız yere, kullanıcıya yardımcı olması için bir yer tutucu oluşturabilirsiniz.

$("#sirala").sortable({
   placeholder : "yer_tutucu",
   tolerance : "pointer"
});

Ayrıca tolerance argümanı ile yerini değiştireceğiniz elemanlar için açılan yerin mouse imlecine dokunması anında açılmasını sağlayabilirsiniz.

Burayı biraz karışık anlatmış olabilirim ama örneği inceleyince daha anlaşılır olacağını düşünüyorum. Buradan inceleyebilirsiniz.

containment argümanı ile yerini değiştirdiğiniz elemanın belirli sınırlar içinde kalmasını sağlayabilirsiniz.

$("#sirala").sortable({
   containment : ".sarmala"
});

Sonuca buradan bakabilirsiniz.

Son olarak connectWith argümanını tanıtmak istiyorum. connectWith argümanı ile iki farklı sıralanabilir listeyi birbirine bağlayabilir ve elemanları arasında geçişler yapabilirsiniz.

$("#sirala").sortable({
   connectWith : "#sirala_2",
   opacity : 0.5,
   revert : true,
   tolerance : "pointer"
});
$("#sirala_2").sortable({
   opacity : 0.5,
   revert : true,
   tolerance : "pointer"
});

Bu örnekte ilk listedeki elemanlar ikinci listeye eklenebilir fakat ikincideki elemanlar birinci listeye eklenemezler. Çünkü bağlama işlemi tek taraflı yapılmıştır, dilerseniz siz çift taraflı bağlama da yapabilirsiniz.

Örneği buradan inceleyebilirsiniz.

Sortable nesneler ile ilgili olarak buradaki dökümanı da incelemenizi tavsiye ediyorum.

Benzer Yazılar

Yorumlar

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla