Jquery ile Sürüklenebilir Nesne Yaratma – Draggable

Bu yazımda jquery ile hareket edebilen nesneler yaratmayı ve bu nesneleri nasıl kontrol edebileceğimizi anlatmaya çalışacağım.

Öncelikle bu işlem için gerekli kütüphaneleri sırasıyla 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.draggable.js"></script>

draggable() Fonksiyonu

draggable Fonksiyonu, uygulandığı elemente sürüklenebilme özelliği katar. Bunu da yukarıda eklediğimiz kütüphaneler ile yapıyor.

Bu fonksiyon içine aldığı argümanlarla çok değişik şekillerde kullanılabilir. Aşağıda temel kullanımı ve önemli gördüğüm argümanları tanıtmaya çalışacağım.

Sayfada .surukle sınıfına ait bir div oluşturalım ve bu dive sürüklenebilme özelliği verelim.

$(".surukle").draggable();

Ya da bu elementin sadece x ya da sadece y ekseninde sürüklenmesini sağlayalım ;

$(".surukle_x").draggable({ axis : "x" });

$(".surukle_y").draggable({ axis : "y" });

Sonuca buradan bakabilirsiniz.

Gördüğünüz gibi axis bir argüman. Bu argümanın aldığı değere göre de draggable fonksiyonun işlevi değişiyor.

Şimdi de containment argümanı ile belirli bir sınır içerisinde sürüklenebilme özelliğine bakalım.

Sürüklenebilen elementi .sarmala sınıfına ait bir div içerisine alalım ve bu divin dışına çıkmasını engelleyelim ;

$(".surukle").draggable({ containment : ".sarmala" });

Biraz karışık anlatmış olabilirim ama örnek gayet basit buradan inceleyebilirsiniz.

distance ve delay argümanları isimlerinden de anlaşılacağı gibi sürüklenme özelliğini gecikme ile yapıyorlar.

$(".surukle_mesafe").draggable({ distance : 75 });

$(".surukle_zaman").draggable({ delay : 500 });

Sonuca buradan bakabilirsiniz.

snap argümanı ile sürüklenebilen bir elementi, başka bir elemente yapıştırabilirsiniz. Adından da anlaşıldığı gibi o elementi ısırıyor. :)

$(".surukle").draggable({ snap : true });
// Özellik aktif, sadece draggable nesnelere yapışır

$(".surukle_2").draggable({ snap : ".buyuk" });
// .buyuk adlı sınıftan elementlere yapışır

$(".surukle_3").draggable({ snap : ".buyuk", snapMode : "outer" });
// .buyuk adlı sınıfın dış cephesine yapışır

$(".surukle_4").draggable({ grid : [30,30] });
// 30px 30px öteye yapışır

Örneği buradan inceleyebilirsiniz.

Ayrıca snapTolerance argümanı ile yapışmak için gereken mesafeyi de ayarlayabilirsiniz.

$(".surukle_4").draggable({ snap : true, snapTolerance : 40px });
//Default değeri 20px dir.

revert argümanı ile sürüklenen eleman eski konumuna geri getirilebilir.

$(".surukle").draggable({ revert : true });

$(".surukle_2").draggable({

   revert : true,
   helper : "clone",
   opacity : 0.5, cursor : "move"

});

Örneği buradan inceleyebilirsiniz.

Bu örnekte helper argümanı elementin bir kopyasını oluşturuyor, opacity argümanı şeffaflığı ayarlıyor, cursor argümanı ise mouse imlecinin tipini belirliyor. Zaten örnekte de herşey gayet basit ve açık bir şekilde belirtilmiş.

Ayrıca revertDuration argümanı ile sürüklenen elementin eski konumuna gelme zamanı da ayarlanabilir.

$(".surukle").draggable({ revert : true, revertDuration : 2000 });
// Default değeri 500 dür. (0.5 saniye)

handler argümanı ile bir elementin neresinden sürüklenebileceği belirtilebilir, cancel argümanı ile de neresinden sürüklenemeyeceği belirtilebir.

$(".surukle").draggable({ handle : ".header" });

$(".surukle_2").draggable({ revert : true,  cancel : ".footer" });

Sonuca buradan bakabilirsiniz.

Benim önemli gördüğüm argümanlar bunlardı, siz dilerseniz buradan argümanların tamamına bakabilirsiniz.

Ayrıca yazıda geçen örnekleri indirmek için tıklayınız.