jQuery, günümüzde git gide kullanışlı hale gelirken, kullanım payıda son süratle artmakta. Bir nevi JavaScript, Ajax ve Efekt kütüphanesi olarakta görev yapıyor. Ayrıca jQuery’de kod yazmak çok kolay. Tek satırda bir çok işlemi yapabiliyorsunuz. Bu yazımda ise bir işimde kullanmam gerektiği için yaptığım bir jQuery özelliğini sizlerle paylaşmak istiyorum. jQuery Drag özelliği ile, belirlediğiniz bir nesneyi üstüne basılı tutarak ekran üzerinde istediğiniz yere taşıyabiliyorsunuz. Ayrıca bıraktığınızda tekrar başlangıç noktasına giden bir kod ekleyerek bu özelliği bütünlüyoruz. Birde buraya ekleyeceğimiz şeffaflık kodu olacak. Lafı çok uzatmadan kodumuzu görelim.

Herşeyden önce kodumuzu etiketleri arasına ekliyoruz. Ayrıca yine bu etiketler arasında şu script kodlarınıda ekliyoruz ki jQuery özelliklerini nereden çekeceğini bilsin.

<script></script>
<script></script>
<script></script>

Özellikleri çekeceğimiz JS dosyalarını belirttikten sonra sıra geldi asıl kodumuzu eklemeye:

<script>
$(document).ready(function() {
$(".alignleft").draggable({opacity:0.75,revert:true});
});
</script>

Burada 3. satırda tüm işlemleri yapmış bulunuyoruz. İnceleyecek olursak; .alignleft, yazı içerisindeki resimlerin class‘ı. Bu durumda bizim taşıma işlemimiz yazı resimleri üzerinde olacak.

.draggable ise, özelliğimizi yansıtacak kısım. Ardından gelen opacity:0.75 ise, taşıma işlemi yapılırken taşınan nesnenin şeffaflık değeri. Son olarak revert:true ise, taşınan nesnenin bırakıldıktan sonra tekrar başlangıç noktasına dönmesini sağlar.

Bu kodun çalışır bir halini görmek istiyorsanız, blogumdaki yazıların resimlerini tutup-sürükleyin. Bıraktığınızda tekrar yerine dönecektir.

Kaynak: http://www.syorulmaz.com/jquery-de-drag-ozelligi-ile-bir-nesneyi-tasimak.html