Jquery UI Dersleri 4 – Droppable Options

Merhaba arkadaşlarım. Droppable özelliğini anlatması biraz zor olcak gibi. Bu yüzden örnek bir senaryo üzerinden gidersek daha rahat anlaşılır diye düşünüyorum. Önce genel bir tanımını yapalım. Ardından örnek senaryoya bakalım. Aşağıdaki açıklamalar biraz karışık gelebilir. Hazırladığım örneği ve kaynak kodları incelediğinizde daha rahat anlayabilirsiniz.

Tanım
Draggable özelliği atanmış bir element sürüklenmeye başlandığında kendini tetikleyen bir başka JQuery UI özelliktir. Draggable ın kendi options, method ve eventlerı olduğu gibi droppable özelliğinde kendi options, method ve eventlerı vardır.

Senaryo
Bir elemente draggable özelliği atandığını düşünün. Aynı şekilde başka bir elementede droppable özelliği atanmış olsun. Draggable özelliği atanmış element sürüklenmeye başlandığı anda droppable özelliği atanan element kendi kendini tetikleyip kendi özelliklerini yada bir başka elementin özelliklerini değiştirebilir (Örn;  renk değiştirmek). Ancak bu işlemlerin sadece draggable ile sürükleme yapılmaya başlandığı anda gerçekleşeceğini unutmayın.

 

accept
Referans alınacak olan draggable özelliği atanmış elementin id si yada classı yazılır. Referans alınan element sürüklendiğinde droppable özelliği kendini tetikleyecektir
accept: ‘.box1’

activeClass
Draggable özelliği atanan element sürüklenmeye başlandığı anda droppable özelliği atanan elementin classını değiştirmek için kullanılır. Böylece yukarıda bahsettiğim renk değiştirme işlemi yapılabilir.
activeClass: ‘greenbox’

hoverClass
Draggable özelliği atanan element sürüklenmeye başlandıkdan sonra droppable özelliği atanan elementin üzerine geldiğinde droppable özelliği atanan elementin classını değiştirmek için kullanılır. activeclass Draggable özelliği atanan element sürüklenmeye başlandığı anda hoverClass ise iki element üst üste geldiği anda tetiklenir.
activeClass: ‘redbox’

tolerance
Draggable özelliği atanan element sürüklenmeye başlandığında  droppable özelliği atanan elementin options ve methodları kullanılarak işlemler yapılabilir.  hoverClass özelliği ile classı değiştirebilir yada droppable özelliğine ait methotlar (out, over, drop vs) tetiklenebilir. Örneğin ilerleyen derslerde anlatacağım drop methodu sürükleme işlemi bittiği anda kendini tetikler.  fitintersectpointer ve touch değelerini alabilir.  fit değeri verilirse eventlerin yada optionların tetiklenmesi için iki elementin tamamen üst üste olması gerekir. intersect değeri verilise draggable özelliği atanan elementin %50 si  droppable özelliği atanan elementin üstüne geldiğinde options ve methodlar tetiklenir. pointer değeri verilise draggable özelliği atanan elementin %25 i  droppable özelliği atanan elementin üstüne geldiğinde options ve methodlar tetiklenir. touch değeri verilise draggable özelliği atanan elementin %1 i  droppable özelliği atanan elementin üstüne geldiğinde options ve methodlar tetiklenir.
tolerance: ‘touch’

Bunların dışında bir kaç adet daha option mevcut ancak çok gerekli görmediğim için anlatmıyorum. Zaten kafa karışıklığı yapcak. Diğer optionlara şu adresten bakabilirsiniz.

Aşağıdaki örnekte div.bluebox isimli dive droppable özelliği atanmış. div.box1 isimli div sürüklenmeye başlandığında div.bluebox kendini tetikleyecek ve activeClass: ‘greenbox’ option ı ile class ataması yapılacak. İki div üst üst geldiğinde hoverClass: ‘blueboxHover’ option ı ile 2. defa class ataması yapılacak. tolerance: ‘fit’ olarak ayarlandığı için hoverClass iki div tamamen üst üste geldiğinde tetiklenecektir. Eğer tolerance: ‘intersect’ olarak belirlenseydi div.box1 50% si div.bluebox üzerine geldiğinde tetiklenecekti. tolerance değeri methodların tetiklenmesi içinde geçerlidir. İlgili methodları bir sonraki derste inceleyeceğiz. En alttaki önizlemeye basarak canlı versiyonunu inceleyin mutlaka. Kalın sağlıcakla.

Bir Örnek;

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

			$('div.bluebox').droppable({
				accept: '.box1',
				activeClass: 'greenbox',
				hoverClass: 'blueboxHover',
				tolerance: 'fit'
			})
		})

Şunlarda Hoşunuza Gidebilir...

1 Response

  1. 30 Nisan 2018

    […] atanmış bir element referans olarak belirtildiğinde tetiklenir. (Referans belirtme işlemini bir önceki makalede […]

Bir cevap yazın

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

%d blogcu bunu beğendi: