jQuery ile “çek-bırak” özellikli nesneler oluşturmak

1. Html kodlaması
   
2. Css ile biçimlendirme ve konumlandırma
   
3. jQuery ile nesneye hareket kazandırma
   

1. Html kodlaması


ilk adımda bir içerik nesnesi belirteceğiz. Daha sonra da bu içerik nesnesinin içerisine, hareketlendirmek istediğimiz rozet nesnesini yerleştireceğiz. şimdilik “rozet” nesnesinin içerisinde yalnızca v2 yazısı görünüyor ama daha sonra bunun arkaplanına css yardımıyla bir rozet resmi atayacağız.

Kod:

<div id="icerik">
   <div id="rozet">v2</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident...
</div>

2. Css ile biçimlendirme ve konumlandırma


ilk adımda, hareketlendirmek istediğimiz “rozet” nesnesini ve bunu
içerisinde tutan “içerik” nesnesini oluşturmuştuk. ikinci adımda bu
nesneleri css kullanarak biçimlendireceğiz. Ayrıca “rozet” nesnesinin
yerini [Linkleri görebilmek için üye olun veya giriş yapın.] konusundan faydalanarak “içerik” nesnesinin sol-üst köşesine taşıyacağız. şimdi bu işlemleri yapan css kodlarına gözatalım:

Kod:

<style type="text/css">
   div#icerik {
      position: relative;
      margin: 0 auto;
      width: 450px;
      padding: 5px 10px;
      border: 5px solid #444;
      background-color: #7f8183;
      color: #fff;
      font: normal 12px/18px "Trebuchet MS";
   }

   div#rozet {
      position: absolute;
      width: 77px;
      height: 77px;
      top: -40px;
      left: -40px;
      text-indent: -9999px;
      background: url(rozet.png) 0 0 no-repeat;
      /* IE 6 için saydamlık probleminin çözümü */
        _background: transparent;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rozet.png', sizingMethod='scale');
   }
</style>

3. jQuery ile nesneye hareket kazandırma


Yapacak tek bir işlem kaldı: jQuery ve 2 adet eklenti yardımıyla “rozet” nesnesine hareket kazandırmak… Bu adımda bize [Linkleri görebilmek için üye olun veya giriş yapın.] ve [Linkleri görebilmek için üye olun veya giriş yapın.]
eklentileri de lâzım olacak. O yüzden bu eklentileri indirip jQuery ile
birlikte web sayfamıza dahil etmeliyiz. Bu dahil etme işlemini şöyle
yapabilirsiniz:

Kod:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easydrag.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>

Artık herşey hazır olduğuna göre rozet nesnesini hareketlendirecek kodlarımıza bakalım:

Kod:

<script type="text/javascript">
   $(document).ready(function(){

      $("div#rozet").easydrag();

      $("div#rozet").ondrop(function(){
         $('div#rozet').animate(
            { top:'-40px', left:'-40px'},
            {duration: 1000, easing: 'easeOutElastic'}
         );
      });      

   });
</script>