Jquery UI Dersleri 1 – Draggable Options

Draggable özelliği uyguluandığı nesnenin taşınabilir olmasını sağlıyor. Nesneye draggable() özelliğini atamak için öncelikle nesnenin seçilmesi gerekir. Seçme işleminden sonra özellik uygulanabilir. Diyelimki box1 sınıfına sahip bir div olsun. Bu durumda Jquery UI kodu şöyledir.

$('div.box1').draggable()

Sürüklenecek nesne ile alakalı bir çok ayar yapılabilir. Aşağıda bazı ayarları ve açıklamalarını yazdım.

opacity
Şeffaflık ayarıdır. 0 ile 1 arasında deger verilir.
opacity: 0.6;

cursor
Fare imlecinin görünüm ayarıdır.  crosshair, help, move gibi değerler verilebilir
cursor: ‘move’

revert & revertDuration
Başlangıç notkasına geri dönüş ayarıdır. true yada false değerlerini alabilir. True olması durumunda nesne bırakıldığı anda başlangıç noktasına geri döner. revertDuration ile geri dönüş süresi ayarlanabilir. Milisaniye cinsinden değer girilir.
revert: true,
revertDuration: 2000

helper
Sürükleme yapılacak nesnenin kendisinin mi yoksa kopyasının mı sürükleneceğinin ayarıdır. original yada clone değerini alabilir.
helper: ‘clone ‘

delay
Gecikme süresi ayarıdır. Sürüklenmeye çalışılan nesne sürükleme eylemine belirlenen süre sonra tepki verir. Milisaniye cinsinden değer girilir.
delay: 500

grid
Draggable ile sürükleme işlemi varsayılan olarak 1pxdir. grid ayarı ile mesafe ayarlanabilir. Sayısal deger girilir. İlk deger x ekseni ikinci değer y eksenidir.
grid: [ 50, 50 ]

snap
Sürüklenen nesnenin yapışkan olma durumudur. true yada false değerini alır. true olması durumunda sürüklenen nesne başka bir nesneye yaklaştırıldığında ona yapışır. snapMode ile yapıştırma tipi snapTolerance yapıştırma mesafesi ayarlanabilir.
snap: true,
snapMode: ‘inner’,
snapTolerance: 20

containment
containment ile sürüklenen nesnenin sınırları ayarlanabilir.  Örneğin aşağıdaki örnek sürüklenen nesnenin bluebox sınıfına sahip nesnenin dışına çıkarılamaz olması içindir.
containment: ‘.bluebox’

Örnek Kullanım;

$('div.box1').draggable({
opacity: '0.6',
cursor: 'move'
})

Sürüklenecek nesne ile alakalı ayarların listesini bakmak isterseniz buraya tıklayın. Sol tarafta Options kısmına bakın.
Canlı örnek için aşağıdaki düğmeyi kullanabilirsiniz. Bir sonraki derste görüşmek üzere.

Şunlarda Hoşunuza Gidebilir...

1 Response

  1. 23 Ocak 2018

    […] önceki makalede draggable özelliği içinde kullanılabilen ayarlara bakmıştık bu bölümde de fonksiyonlara bakacağız. […]

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi: