jQuery ile sürükle bırak işlemleri draggable kullanılmaktadır. Draggble ile tarayıcı üzerinde belirlediğiniz objelerin yerlerini oynatabilirsiniz. Sürükle bırak işlemleri için jQuery kütüphanesi dahil edildikten sonra jqueryui.com sitesi üzerinden elde edilen JS dosyasıda dahil edilmelidir. İki JS dosyasıda sayfaya dahil edildikten sonra gerekli sürükleme işlemi yapılabilir.
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
<style>#draggable { border: 10px solid; padding:10px; width:150px}</style>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Kutuyu sürükleyiniz</p>
</div>
</body>
</html>
Yukarıdaki örnekte, CSS ile biçimlendirilen DIV etiketi, draggable ile sürüklenebilir hale gelecektir. Fakat bu işlem sadece tarayıcı üzerinde sağlıklı bir şekilde çalışmasını sürdürecektir. Mobil cihazlarda bu işlemin sorunsuzca çalışması için ekstra bir JS dosyasına ihtiyaç vardır. Mobil cihazlarda yer alan sorunu çözmek için http://touchpunch.furf.com/ sitesinden indireceğiniz JS dosyasını sayfaya dahil etmeniz gerekecektir. İndirmiş olduğunuz eklentiyi sayfaya dahil ettiğinizde draggable işlevini sorunsuzca kullanabilirsiniz.
