Jquery UI Dersleri 1 – Draggable Options

Draggable özelliği atandığını elementin taşınabilir olmasını sağlıyor. Elemente draggable() özelliğini atamak için öncelikle elementin 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 element 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 element 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 elementim yapışkan olma durumudur. true yada false değerini alır. true olması durumunda sürüklenen element başka bir elemente 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 elementin dışına çıkarılamaz olması içindir.
containment: ‘.bluebox’

Örnek Kullanım;

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

Sürüklenecek element 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: