Web 2.0 ın çıkmasıyla birlikte sitelerde javascript kullanımı daha da arttı jquery ile hoş animasyonlar yapılmaya başlandı bende hoşuma giden efektlerden drag & drop olayının basit bir örneğini yaptım umarım işinize yarar.

öncelikle html kısmını yazalım 2 adet kutu oluşturuyorum.

<div style="margin=auto; width:500px; height:200px; display:block; position:relative;"><!--kapsayıcı kutu-->
 <div>Taşı</div>
 <div>Sepete Ekle</div>
</div>

ve css ile biçimlendiriyorum

.dosya {
 position: absolute;
 top: 5px;
 left: 5px;
 border: 2px solid #C4D7ED;
 background-color: #E1E6FA;
 width: 75px;
 height: 75px;
 margin: 10px;
 z-index: 100;
}
.drop {
 background-color: #e9b96e;
 border: 3px double #c17d11;
 width: 150px;
 height: 100px;
 margin: 10px;
 position: absolute;
 top: 5px;
 right: 5px;
 opacity: 0.7;
 overflow:auto;
}
.droppable-active {
 opacity: 1.0;
}
.droppable-hover {
 outline: 1px dotted black;
}

sonra dosyamıza jquery dosyalarını ekliyoruz

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ui.jquery.com/latest/ui/ui.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/ui.draggable.js"></script>
<script src="http://ui.jquery.com/latest/ui/ui.droppable.js"></script>

son olarak da scriptimizi yazıyoruz

<script>

 $(document).ready(function(){
 $(".dosya").draggable({helper: 'clone'});//sürüklenen objenin kopyalanmasi için
$(".drop").droppable({
 accept: ".dosya",// buraya sürükle bırak olayı için eklenecek class lari koyuyoruz
 activeClass: 'droppable-active',
 hoverClass: 'droppable-hover',//kutunun üstüne gelindiği zaman çalıştırılacak class
 drop: function(ev, ui) {
 $(this).append("<br>Eklendi!");
 }
 });
 });
 </script>

dosyamızı görmek için tıklayınız (Link Güncellenmiştir 17.06.2010)