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 nesneye 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 nesnenin şeffaflığını azalttıp cursor ilede imleç görünümünü değiştirdim.

-Sayfada draggable özelliği atanan bir nesne 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 eventi ile sürükleme işlemi başladığı anda  ilk span etiketinin içine “Sürükleme başladı!”  yazdırdım.

-Sürükleme işlemi devam ederken drag eventi tetiklendiği için sürüklenen nesnenin 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 eventi 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: