Jquery UI Dersleri 5 – Droppable Events

Jquery UI Droppable içinde kullanılabilecek create, activate, over, out, drop, deactivate olmak üzere toplam 6 adet event mevcut. Bu eventler referans olarak belirtilen draggable özelliği verilmiş element sürüklendiğinde tetiklenirler.

create
Draggable özelliği atanmış bir element referans olarak belirtildiğinde tetiklenir.
(Referans belirtme işlemini bir önceki makalede anlatmıştık.)

activate
Referans olarak belirtilen element sürüklenmeye başlandığında tetiklenir.

over
Referans olarak belirtilen element droppable özelliği atanmış elementin üstüne geldiğinde bırakılmadan önce tetiklenir.

out
Referans olarak belirtilen element droppable özelliği atanmış elementin üstüne geldikten sonra tekrar üstünden çekildiğinde tetiklenir.

drop
Referans olarak belirtilen element droppable özelliği atanmış elementin üstüne bırakıldığında tetiklenir.

deactivate
Referans olarak belirtilen elementin sürükleme işlemi bırakıldığında tetiklenir.

Örnek Kod

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

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

				// CREATE EVENT
				create: function ()
				{
					$(this).html('Yesil kutu sürüklendiğinde burada durum yazacak.<hr>');
				},

				// ACTIVATE EVENT
				activate: function ()
				{
					var value = $(this).html();
					$(this).html(value+'Yesil kutu sürükleniyor.');
				},

				// OVER EVENT
				over: function ()
				{
					var value = $(this).html();
					$(this).html(value+'Yesil kutu mavi kutunun üstünde duruyor.');
				},

				// OUT EVENT
				out: function ()
				{
					var value = $(this).html();
					$(this).html(value+'Yesil kutu mavi kutunun üstünden geçti.');
				},

				// DROP EVENT
				drop: function ()
				{
					var value = $(this).html();
					$(this).html(value+'Yesil kutu mavi kutunun üstüne bırakıldı.');
				},

				// DEACTIVATE EVENT
				deactivate: function ()
				{
					var value = $(this).html();
					$(this).html(value+'Yesil kutu artık sürüklenmiyor.');
				}
			})			
		})

Ş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: