Jquery UI Dersleri 6 – Droppable Methods

Droppable özelliği içinde eventlar ile birlikte kullanılabilecek 6 adet method mevcut.  Gerekli gördüğüm 3 tanesini aşağıya yazdım.

destroy
Droppable özelliğini siler.

disable
Droppable özelliğini devredışı bırakır.

enable
Devredışı  bırakılmış Droppable özelliğini tekrar aktif eder.

Aşağıdaki örnekte box1 classına sahip div bluebox classına sahip div in üstüne bırakıldığında bluebox classına sahip div in droppable özelliği devre dışını bırakılıyor.  box1 classına sahip div bluebox classına sahip divin üstün çekilip box2 classına sahip div sürüklendiğinde bluebox classına sahip div in droppable özelliği tekrar aktif ediliyor.

Örnek

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

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

				start: function()
				{
					$('div.bluebox').droppable('enable');
				},
			})

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

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

				drop: function ()
				{
					var value = $(this).html();
					$(this).html(value+'Mavi kutunun Droppable özelliği kapatıldı. Tekrar aktif etmek için yeşil kutuyu mavi kutunun dışına çıkar ve siyah kutuyu hareket ettir.');

					$(this).droppable('disable');
				},
			})	
		})

Şunlarda Hoşunuza Gidebilir...

2 Responses

  1. Ali dedi ki:

    Merhaba anlatımlarınız gayet güzel bir başarılı olmuş. Türkçe kaynak arayanlar için çok faydalı
    Benim meraka ettiğim server tarafında bu işlemleri nasıl post edeceğiz yani kayedetmek güncellemek silmek gibi.bu konuda fikir verebilirseniz memnun Olurum

    • byakinyilmaz dedi ki:

      Get, Post gibi istekler JQuery UI ile değil JQuery ile yapılabilir. JQuery Ajax olarak aratırsanız çok sonuç bulabilirsiniz. Sunucu tarafında gelen Post isteğini alabilmek için bir betik yada programla dili kullanmanız gerekir (Örn; PHP). Bunun dışında JQuery’nin ajax methodu JQuery UI içerisinde çalışabiliyor. Örneğin bir elementi Jquery UI ile sürükleyip yeni konumunu Jquery Ajax ile Server’a post edebilirsiniz. Server tarafında da bir programlama dili kullanarak gelen veriyi alıp veritabanınıza kaydedebilirsiniz.

Bir cevap yazın

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

%d blogcu bunu beğendi: