jQuery Sürükle-Bırak İşleminde Delegate Fonksiyonu Kullanımı

Sürükle bırak işlemleri için kullanılan jquery fonksiyonlarını safyaya yeni eklenen bir eleman için dinamik olarak bu olayları ilgili nesneye nasıl bağlayabiliriz konusunda örnek bir çözüm paylaşacağım. Html elemanların sürükle bırak ile kontrol edilmesi görselliği arttıran bir unsurdur. Ancak sayfaya java script kullanılara sondan dahil edilen elementlerin de sürükle bırak işlemine dahil edilmesini isteyebiliriz. Bu durum jQuery kütüphanesinin delegate metodunu ve mouseover olayını birlikte kullanarak yeni eklenen elemanlara da sürükle bırak özelliği kazandırabiliriz. Örnek uygulamamızda .dersBaslik isimli div elemanlarının sürükle bırak özelliğine sahip olmasını istiyoruz.

Sürükle bırak işlemleri için gerekli ayarlamaları ili farklı değişkende saklıyoruz.
//dersBaslik isimli div elemanı taşınmak için tutulduğunda yapılacak işlemlerdir.
var surukleAyarlar =
{
revert: true, // taşınan divin tekrar yerine gelmesi için kullanılır
drag: function () {
$(this).addClass(“active”);//.closest(“aktif”);//.removeClass(“aktif”);
$(this).parent().parent().addClass(“pasif”);
},
stop: function() {
$(this).removeClass(“active”).parent().parent().removeClass(“pasif”);
}
};
//dersBaslik isimli classa atanmış olan div üzerinde taşınan eleman bırakıldığında yapılacak işlemlerdir.
var birakAyarlar = {

hoverClass: “hover”,
tolerance: “pointer”,// “intersect”,// touch sürüklenen elemanın bırakılacağı alana temas eder etmez kabul görmesi, bırakılacağı alanın belirlenerek çizilmesi sağlanır. Böylece nereye bırakıldığı daha net anlaşılabilir.
drop: function (event, ui) {
var üzerineBirakilanDiv = $(this);//Taşınan divin üzerine bırakıldığı divdir. Sürüklenen ders hangi dive bırakıldıysa o dive ait değerlere ulaşılabilir. Bu örnekde önceki dersin ders plan nosunu taşır
var tasinanDiv = ui.draggable; //taşınmakta olan derse ait div elemanıdır. Bu dive ait verilere erişilebilir. Bu örnekte yeni dersin ders plan nosunu taşır
var oncekiDersPlanNo = üzerineBirakilanDiv.attr(“No”);//div elemanlarına eklenecek yeni nitelik alanları planno, dersno, yarıyılno gibi bilgileri taşıyacaktır.
var yeniDersPlanNo = tasinanDiv.attr(“No”);

var eklencekIcerik = tasinanDiv.clone().attr(“style”, “”);// tasinanDiv.find(“.dersBaslik”).clone(); // taşınan dive ait bilgilerin kopyası alınarak intibak yapılan alana bırakılır. Yoksa divin kendisini de taşımış oluruz.
eklencekIcerik.addClass(“intibakDersBaslik”).removeClass(“dersBaslik”).removeClass(“active”);
var eklenecekYer = üzerineBirakilanDiv.parent().find(“.intibak”);

if (eklenecekYer.length == 0) {
var intibakAlani = “<div class=’intibak’></div>”;
üzerineBirakilanDiv.parent().append(intibakAlani);

}

var a = $(this).hasClass(“dersBaslik”);

//Bırakma işlemi yapıldığında veritabanı bağlantı işlemleri burada yapılabilir.
}

};

Bu tanımlamanın ardından jqery delegate metodunu kullanarak ilgili div elementinin üzerine gelindiğinde sürükkle bırak olayının atanmasını sağlayacağız.

 

$(function(){

$(document).delegate(“.dersBaslik”, “mouseover”, function (e) {
$(this).draggable(surukleAyarlar);
$(“.dersBaslik”).droppable(birakAyarlar);
});

})

Dinamik olarak sürükle bırak özelliğinin sayfaya yeni eklene bir elemente nasıl kazandırılabileceğiyle ilgili örnek bir çözüm incelemiş olduk. Elementin mousehover olayına abone olarak bu olay içinde ilgili elemnetin draggable ve dorppable olaylarına abone oluyoruz. Böylece yeni nesne sürüklenebilir oluyor.