Jquery UI Dersleri 2 – Draggable Events

Bir önceki makalede draggable özelliği içinde kullanılabilen ayarlara anlatmıştım bu bölümde de event (olay) kısmını anlatacağım. Gözünüz korkmasın toplam 4 tane event var. Bunlar create, start, dragstop.
create
Herhangibi elemente draggable() özelliği verildiği anda tetiklenir.

start

Sürükleme işlemi başladığı anda tetiklenir.

drag

Sürüklenen işlemi devam ederken tetiklenir.

stop

Sürükleme işlemi bittiği anda tetiklenir.

Örnek Kullanım;

$('div.box1').draggable({
				opacity: '0.6',
				cursor: 'move',
				create: function(event, ui)
				{
					$('span:eq(0)').html('Sürükleme başladığında aşağıda koordinatlar yazacak!');
					$('span:eq(1)').html('Koordinat: Y=0 X=0');
				},

				start: function(event, ui)
				{
					$('span:eq(0)').html('Sürükleme başladı!');
				},

				drag: function(event, ui)
				{
					cleft = Math.round(ui.position.left);
            		ctop = Math.round(ui.position.top);
            		$('span:eq(1)').html('Koordinat: X='+cleft+' Y='+ctop);
				},

				stop: function(event, ui)
				{
					$('span:eq(0)').html('Sürükleme bitti!');
				}
			})

Sürükleme işlem için hem bazı ayarlar yapıp hemde ilgili eventları kullanan bir örnek hazırladım. Madde madde ne yaptığıma bir bakalım.

-Örnekte opacity ile sürükleme başladığı anda sürüklenen elementin şeffaflığını azalttıp cursor ilede imleç görünümünü değiştirdim.

-Sayfada draggable özelliği atanan bir element olduğunda create eventi sayfa yüklenir yüklenmez kendiliğinden tetikleneceği için boş span etiketlerinin içine başlangıç olarak birşeyler yazdırdım.

-Start özelliği ile sürükleme işlemi başladığı anda  ilk span etiketinin içine içine “Sürükleme başladı!”  yazdırdım.

-Sürükleme işlemi devam ederken drag özelliği tetiklendiği için sürüklenen elementin o anki koordinatlarını alıp ikinci span etiketinin içine yazdırdım.

-Son olarak sürükleme işlemi bittiği anda stop özelliği tetiklendiği için ilk span etiketinin içine “Sürükleme bitti!” yazdırdım.

Şunlarda Hoşunuza Gidebilir...

Bir Cevap Yazın

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

%d blogcu bunu beğendi: