JQuery Drag & Drop

Site içerisinde bulunan elemanları sürüklenebilir hale getirmek için jQuery UI kütüphanesi içerisinde Draggable Plugin’i bulunuyor. jQuery UI adresinden interactions bölümünden draggable sınıfını seçerek kütüphaneyi indirebilirsiniz.

Kütüphaneyi sitenizde kullanmak için scripti eklemeniz gerekiyor:

<script src="jquery/js/jquery-ui-1.8.16.custom.min.js"></script>

Kütüphaneyi ekledikten sonra drag & drop işlemine başlayabilirsiniz. Liste elemanlarını sürükleyip diğer bir elemanın üzerine bıraktığımızda yerlerinin değişmesini sağlayan bir örnek yapalım.
HTML :

<ul>
    <li class="draggable droppable">1st Item</li>
    <li class="draggable droppable">2nd Item</li>
    <li class="draggable droppable">3rd Item</li>
    <li class="draggable droppable">4th Item</li>
    <li class="draggable droppable">5th Item</li>
</ul>

HTML kodunuzda sürüklenebilir olmasını istediğimiz elemanlara id veya class değerleri vermemiz gerekiyor.

Sonrasında ise script içerisinde sınıfa ait özellikleri ve drag & drop işleminde neler yapılacağına ait fonksiyonları tanımlamız gerekiyor.


Drag

$(".draggable").draggable({helper: 'clone'});

Sürüklenebilir olmasını istediğimiz elemanları jQuery ile seçtikten sonra .draggable methodunu kullanarak sürüklenebilir olmasını sağlıyoruz. Ayrıca methoda belirli opsiyonlarda gönderebiliyoruz. Örnekteki helper elemanın bir klonunun kullanılmasını sağlıyor. Eğer bir helper değeri göndermezsek default olarak “original” değeri set ediliyor ve elemanın orjinalinin kullanılması sağlanıyor. Diğer opsiyonlar ve default değerleri:

        options: {
		addClasses: true,
		appendTo: "parent",
		axis: false,
		connectToSortable: false,
		containment: false,
		cursor: "auto",
		cursorAt: false,
		grid: false,
		handle: false,
		helper: "original",
		iframeFix: false,
		opacity: false,
		refreshPositions: false,
		revert: false,
		revertDuration: 500,
		scope: "default",
		scroll: true,
		scrollSensitivity: 20,
		scrollSpeed: 20,
		snap: false,
		snapMode: "both",
		snapTolerance: 20,
		stack: false,
		zIndex: false
	},



Drop

$( ".droppable" ).droppable({
        accept: ".draggable",
	drop: function( event, ui ) {
            var text1 = this.textContent;
            var text2 = ui.draggable[0].textContent;
            this.textContent = text2;
            ui.draggable[0].textContent = text1;
	}
});

Sürüklediğimiz elemanları üzerine bırakabileceğimiz elemanlar içinde “droppable” methodunu kullanıyoruz. Droppable methodunun da kendine ait opsiyonları bulunuyor. “accept” özelliği ile seçtiğimiz elemanın üzerine hangi class değerine sahip elemanları bırakabileceğimizi belirliyoruz. “drop” kısmında ise elemanı bıraktıktan sonra çalışacak olan fonksiyonu tanımlıyoruz. Örnekte this dediğimiz üzerine bırakılan eleman, fonksiyonda bulunan “ui” parametresinde de sürüklediğimiz elemanın bilgilerini içeren bir obje bulunuyor.

jQuery’nin kendi UI dökümantasyonuna buradan ulaşabilirsiniz.

Benim yaptığım küçük örneği incelemek için ise : Drag & Drop