Yazılım Örnekleri

Bu makalemizde jquery ile hareket edebilen nesneler (draggable) yapmayı ve bu yaptığımız nesneleri nasıl kontrol edebileceğimizi anlatmaya çalışacağım.

Hareket eden nesneleri (draggable) yapabilmmemiz için ilk olarak gerekli olan kütüphaneleri sayfamımıza çağırmamız gerekiyor.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

Jquery de hareket eden nesneler için Draggable Fonksiyonunu kullanıyoruz. Bu fonksiyon eklendiği nesneye sürüklenebilme özelliği veriyor.  
Bu fonksiyonun temel kullanımı aşağıdaki gibidir.
Sayfada "surukle" idli (sınıfta olabilir) bir divimiz var şimdi bu dive sürüklenebilme özelliği veriyoruz.

$("#surukle").draggable();

Draggable Fonksiyonu "revert" argümanı:
revert argümanı sürüklediğimiz elemanın eski yerine geri dönmesini sağlar.

$("#surukle").draggable({ 
                revert: true, // sürükleme işlemi bitince, eski yerine geri gelmesini sağlar
   });

Draggable Fonksiyonu "duration" argümanı:
duration argümanı işlemin ne akdar sürede olacağını belirler.

$("#surukle").draggable({ 
                revert: true, // sürükleme işlemi bitince, eski yerine geri gelmesini sağlar
                revertDuration: 100
   });

 
Draggable Fonksiyonu "containment" argümanı: 
containment argümanı ile sürükleyeceğimiz nesnenin belirli bir div içerisinde sürüklenmesini sağlarız yani sınır koyarız. Üst divimizden çıkarmayız.

$("#surukle").draggable({
    containment: "parent"
});

Draggable Fonksiyonu "axis" argümanı: 
Axis argümanı sürükleyeğimiz elemanın sadece x ya da sadece y ekseninde sürüklenmesini sağlar ;

$( "#surukle1" ).draggable({ axis: "y" });
$( "#surukle2" ).draggable({axis: "x" });

Draggable Fonksiyonu "grid" argümanı: 
Grid argümanı sürükleyeğimiz elemanın kaç kere gideceğini belirler. Tam anlatamadım örnekten ne demek istediğimi anlarsınız :)

$("#surukle").draggable({ grid: [ 180, 180 ] });

Draggable Fonksiyonu "handle" argümanı: 
handle argümanı ile bir elementin neresinden sürüklenebileceği belirtileyebilirsiniz.

$("#surukle").draggable({
                revert: true,
                revertDuration: 100,
                handle: "#tut"
   });

Draggable Fonksiyonu "stop" olayı: 
Stop ile sürüklediğiniz element durduktan sonra ne yapılması gerektiğini beliryebilirsiniz. Biz bu örnekte sürüklediğimiz elementin durduğunda tarayıcıdaki koordinatlarını alacağız.

$("#surukle").draggable({
stop: function(e, ui) {
   var pos="top: " + ui.position.top + "px , left: " + ui.position.left + "px<br />";
   var pos2="top: " + ui.offset.top + "px , left: " + ui.offset.left + "px";
   $("#goster").empty().append(pos).append(pos2);
   }
});