jQuery UI, jQuery'yi görsel ve animasyon alanlarında daha iyi kullanabilmek amacıyla geliştirilmiş JS kütüphanesidir. Normal sürükleme işlemlerinden daha çok işlevleri/özellikleri sayesinde tercih ediliyor.
jQuery UI ile draggable işlemlerini yapmak çok basit. https://jqueryui.com/download/ adresinden indirip projenize eklemeniz gerekmektedir.



Basit Bir Div Taşıma İşlemi

Div herhangi bir koşula veya özelliğe bağlı olmadan sürüklenir.

Kod:
$(function(){
$("#divId").draggable();
});




Auto-Scroll Özelliği

Bu özellik sayesinde nesneyi taşırken scroll özelliğini aktif ediyoruz.

Kod:
$(function(){
$("#divId").draggable(
{ scroll: true }
);
});




Sürükleme Yönünü Ayarlama

"axis" özelliği ile sürüklenen/taşınan nesneye sadece belli eksen üzerinde taşınmasına izin veriyoruz.

Kod:
$(function(){
// yalnızca y ekseninde sürükleme
$("#divId").draggable(
{ axis: "y" }
);

// yalnızca x ekseninde sürükleme
$("#divId").draggable(
{ axis: "y" }
);
});




Start/Drag/Stop işlemleri

Sürükleme/taşıma işlemine bir olay eklemek istediğinizde kullanabilirsiniz.
Start: Div'in taşınmaya başladığı an.
Drag: Div her sürüklendiğinde çalışır.
Stop: Tıklama olayı sona erdiğinde gerçekleşir.

Kod:
$(function(){
$("#divId").draggable(
start: function() {
// Sürüklemenin başlama anı
},
drag: function() {
// Sürükleme anı
},
stop: function() {
// Sürükleme işlemi bittiğinde
}
);
});




Handles Koşulu

Div içerisinde sadece belirtilen elemente tıklanarak taşıma işlemi yapılır.
Örn:
Kod:
<font color="Sienna"div/font font color="darkorange"id/font=font color="Lime""divId"/font>
<font color="sienna"div/font font color="DarkOrange"class/font=font color="lime""divClass"/font></font color="sienna"div/font>
</font color="sienna"div/font>
Kod:
$(function(){
// divId'yi sadece divClass'a tıklayarak sürükleyebilirsiniz
$("#divId").draggable(
{ handles: ".divClass" }
);
});




Containment Koşulu

Sadece ebeveyn element içerisinde sürüklenebilir.
Örn:
Kod:

</font color="sienna"div/font>
</font color="sienna"div/font>
Kod:
$(function(){
$(".divClass").draggable(
{ containment: "#divId" }
);
});




Normalde sitesinde kullanımı var fakat ben Türkçe bir kaynak olsun istedim. Umarım işinize yaramıştır.