• Şuradasınız
  • Anasayfa
  • JQuery
  • Jquery ile Bırakılabilir Nesne Yaratma – Droppable

Jquery ile Bırakılabilir Nesne Yaratma – Droppable

Merhaba bu yazımda jquery ile droppable nesne oluşturmayı anlatacağım.

Droppable kelimesini nasıl türkçeye çevireceğim bilemedim. En uygunu bırakılabilir geldi bana, eğer daha güzel bir şekilde çevirebilen varsa, rica ediyorum yazsın. Çünkü böyle pek iyi olmadı. :)

Jquery de droppable nesne oluşturabilmek için öncelikle sürüklenebilen nesneler oluşturulmalıdır. Bu ikisi gördüğüm kadarıyla beraber çalışıyorlar. Yani sürüklenebilen elementi droppable nesnenin üzerine bırakacağız. Olayı daha iyi anlamak için öncelikle buradaki örneğe bakmanızı tavsiye ediyorum.

Bir başka tanım daha yapalım; droppable nesneler içine başka nesneleri alabilen nesnelerdir.

Jquery de droppable nesneler yaratabilmek için gereken kütüphanaleri sayfamıza entegre edelim.

<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.draggable.js"></script>
<script src="jquery.ui.droppable.js"></script>

Temel olarak bu kütüphaneleri eklememizin sebebi, draggable() ve droppable() fonksiyonlarını kullanabilmektir. Çünkü sürüklenebilme ve bırakılabilme özelliklerini bu fonksiyonlar ile sağlayacağız.

Sürüklenebilen bir nesne droppable bir nesnenin üzerine bırakıldığında drop olayı gerçeklemektedir. Bu olay üzerinden bir örnek yapalım.

Öncelikle sürüklenebilen bir nesne yaratacağız. Daha sonra da droppable bir nesne yaratacağız. Ardından droppable() fonksiyonuna ait drop olayı ile nesne taşındığı anda taşındı mesajı vereceğiz.

$(".drag").draggable(); // Draggable nesne
$(".drop").droppable({  // Droppable nesne
   drop : function(event, ui) {
      $(this).find("p").html("Taşındı"); // Taşındı mesajı
   }
});

Örneği buradan inceleyebilirsiniz.

Droppable fonksiyonunun alabileceği farklı argümanlar bulunmaktadır. Şimdi bu argümanlardan önemli olduğunu düşündüklerimi yazmaya çalışayım.

accept argümanı ile droppable nesne sadece sizin belirttiğiniz elementleri kabul edecek.

$(".drag").draggable();
$(".drag_2").draggable();
$(".drop").droppable({
   accept : ".drag_2",
   drop : function(event, ui) {
      $(this).find("p").html("Taşındı");
   }
});

Sonuca buradan bakabilirsiniz.

hoverClass argümanı ile, sürüklediğiniz nesne hedefin üzerine getirildiğinde görsel olarak değişecek. Sizin belirttiğiniz sınıftaki css özelliklerini kazanacak.

activeClass argümanı ile de sürüklenen nesne sürüklenmeye başladığı anda droppable nesnenin css özellikleri değişecek. Tabii bu css özelliklerini bir sınıf üzerinden değiştirmelisiniz.

$(".drop").droppable({
   accept : ".drag",
   hoverClass : "seffaf",
   drop : function(event, ui) {
      $(this).find("p").html("Mavi Kutu Taşındı");
   }
});
$(".drop_2").droppable({
   accept : ".drag_2",
   activeClass : "seffaf",
   drop : function(event, ui) {
      $(this).find("p").html("Yeşil Kutu Taşındı");
   }
});

Örneği buradan inceleyebilirsiniz.

Hatırlarsanız sürüklenebilir nesne konusunda revert argümanından bahsetmiştim. revert argümanını droppable fonksiyonu ile ilişkili bir şekilde kullanmamız da mümkündür. Yalnız revert argümanı droppable fonksiyonunu içinde değil, draggable fonksiyonun içinde kullanılmalıdır.

$(".drag").draggable({ revert : "valid" });
$(".drag_2").draggable({ revert : "invalid" });
$(".drop").droppable({
   activeClass : "seffaf",
   drop : function(event, ui) {
      $(this).find("p").html("Taşındı");
   }
});

Son örneğimizi de buradan inceleyebilirsiniz.

Bu argümanların dışında bir de tolerance argümanından bahsetmek istiyorum. Droppable nesnenin sürüklenen elementi kabul etme mesafesidir diyebiliriz. Default değeri intersect dir. 3 farklı değeri daha vardır ;

  • fit : sürüklenen nesne tamamen droppable nesnenin üzerine gelince
  • touch : sürüklenen nesne droppable nesneye dokununca
  • pointer : sürüklenen nesneyi tuta mouse imleci droppable nesneye dokununca

Droppable nesneler ile ilgili benim anlatacaklarım bu kadardı.

Yazıda geçen örneklerin tamamını buradan indirebilirsiniz.

Bu konu ile ilgili daha geniş bir dökümana buradan ulaşabilirsiniz.

Benzer Yazılar

Yorumlar

  • sevket , 16 Eylül 2012 - 22:14:41

    Verdiğiniz bilgiler için çok teşekkürler. Yapmış olduğum site üzerinde draggable nesnesi her türlü tarayıcıda çalışırken ie’de çalışmıyordu. Bir türlü çözememiştim. Verdiğiniz örnekler ile sorunumu çözdüm.
    Saygılarımı sunuyorum.

    Cevapla
  • Samet , 26 Şubat 2014 - 04:34:32

    Merhabalar verdiğiniz örnekler sizin siteniz üstünde çalışıyor ama bilgisayarıma indirdiğinde sürükle özelliği kayboluyor neden olduğu konusunda bir fikriniz var mı acaba?

    Cevapla
    • Cem Demir , 27 Şubat 2014 - 12:25:00

      Merhaba, aklıma 2 sebep geliyor.

      1) Kullancıdığınız JQuery sürümü farklı olabilir. Yeni sürümlerde fonksiyonlar değiştirilmiş olabilir.
      2) JQuery’nin haricinde gerekli JQuery UI kütüphanelerini ekleyememiş olabilirsiniz.

      Cevapla

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