Kişisel bir web günlüğü

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

rozet2. Yıl teması'nda küçük bir atraksiyon olsun diye, sol üst köşedeki rozet resmini jQuery kullanarak hareketlendirmiştim. İşleyişi gayet basit. Mouse (fare) ile nesneyi tutup çekiyorsunuz ve bıraktığınız zaman eski yerine geri dönüyor. Basit birşey olmasına rağmen nedense çok ilgi gördü ve bunun nasıl yapıldığını anlatmamı isteyenler oldu. Bu yazıyı da onlar için özel hazırladım ;)

Ben bu atraksiyonu ilk defa moo.fx sayfasında görmüştüm. Siz de bu sayfaya girerek sağ-üst köşedeki 3 KB yazan nesneyi inceleyebilirsiniz. Bu sayfadaki kodlara gözgezdirmiştim ve aynı şeyi jQuery kullanarak yapmayı denemiştim. Aslında 3 basit adımda siz de buna benzer atraksiyonlar yapabilirsiniz ve ziyaretçilerinizi ufak da olsa etkileyebilirsiniz. Şimdi aşağıdaki adımları takip ederek bu işlemi yapmaya başlayalım:

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

1. Html kodlaması

İlk 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.

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

Bu adımda yaptığımız işlemlerin sonucunu Adım 1 sayfasında veya alttaki ekran görüntüsünde görebilirsiniz.

adım 1

2. Css ile biçimlendirme ve konumlandırma

İlk adımda, hareketlendirmek istediğimiz "rozet" nesnesini ve bunu içerisinde tutan "içerik" nesnesini oluşturmuştuk. İkinci adımda bu nesneleri css kullanarak biçimlendireceğiz. Ayrıca "rozet" nesnesinin yerini css ile konumlandırma (positioning) konusundan faydalanarak "içerik" nesnesinin sol-üst köşesine taşıyacağız. Şimdi bu işlemleri yapan css kodlarına gözatalım:

  1. <style type="text/css">
  2.     div#icerik {
  3.         position: relative;
  4.         margin: 0 auto;
  5.         width: 450px;
  6.         padding: 5px 10px;
  7.         border: 5px solid #444;
  8.         background-color: #7f8183;
  9.         color: #fff;
  10.         font: normal 12px/18px "Trebuchet MS";
  11.     }
  12.    
  13.     div#rozet {
  14.         position: absolute;
  15.         width: 77px;
  16.         height: 77px;
  17.         top: -40px;
  18.         left: -40px;
  19.         text-indent: -9999px;
  20.         background: url(rozet.png) 0 0 no-repeat;
  21.         /* IE 6 için saydamlık probleminin çözümü */
  22.         _background: transparent;
  23.         _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rozet.png', sizingMethod='scale');
  24.     }
  25. </style>

Bu kodlar yardımıyla "icerik" nesnesini relative olarak, "rozet" nesnesini ise absolute olarak konumlandırdık. Daha sonra "rozet" nesnesinin genişlik ve yükseklik değerlerini, arkaplan olarak olarak kullandığımız "rozet.png" dosyasının genişlik ve yükseklik değerlerine eşitledik (77px). Hemen ardından top ve left değerleri ile "rozet" nesnesinin, "icerik" nesnesinin sol-üst köşesine yerleşmesini sağladık (-40px). Son iki satırda ise IE 6'nın png dosyalarıyla yaşadığı saydamlık problemine çözüm getirmiş olduk. Bu problem ile ilgili ayrıntılı bilgi edinmek isterseniz Internet Explorer 6 için saydam PNG desteği sayfasını okumalısınız.

Bu adımda yaptığımız işlemlerin sonucunu Adım 2 sayfasında veya alttaki ekran görüntüsünde görebilirsiniz.

adım 2

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 EasyDrag ve Easing 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:

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.easydrag.js"></script>
  3. <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:

  1. <script type="text/javascript">
  2.     $(document).ready(function(){
  3.    
  4.         $("div#rozet").easydrag();
  5.  
  6.         $("div#rozet").ondrop(function(){
  7.             $('div#rozet').animate(
  8.                 { top:'-40px', left:'-40px'},
  9.                 {duration: 1000, easing: 'easeOutElastic'}
  10.             );
  11.         });  
  12.    
  13.     });
  14. </script>

Öncelikle $("div#rozet").easydrag(); kodu ile rozet nesnesinin sürüklenebilir olmasını sağlıyoruz. Sonraysa $("div#rozet").ondrop(); kodunu kullanarak sürüklenen nesne bırakıldığında herhangi bir işlem yapılmasını belirtiyoruz. Bu iki kod EasyDrag eklentisinin bize sağladığı özelliklerdir.

Bu işlemlerden sonra ondrop() fonksiyonu tetiklendiği anda rozet nesnesinin ilk top ve left değerlerine geri dönmesini jQuery'nin yerleşik fonksiyonu olan animate() ile sağlıyoruz. Bu işlem 1000 milisaniyelik bir sürede gerçekleşiyor. Ayrıca bu esnada rozet nesnemize Easing eklentisinin easeOutElastic isimli efektinin uygulanmasını belirtiyoruz. Tüm bu işlemleri yapmamızı sağlayan animate() fonksiyonu hakkında detaylı bilgiyi jQuery ve Efekt işlemleri isimli yazımda bulabilirsiniz.

Bu son adımda yaptığımız işlemlerin sonucunu Adım 3 sayfasında görebilirsiniz.

adım 3

Sonuç

Gördüğünüz gibi son derece kolay bir işlem. Dikkat etmemiz gereken şey, ilk başta belirlemiş olduğumuz adımları tek tek ve sırayla uygulamaya geçirmiş olmamızdır. Aslında basit gibi görünen bu konuda pekçok bilgiyi de içiçe kullanmış olduk. O yüzden arada sırada böyle atraksiyonlar hazırlamak, öğrendiğimiz bilgileri somut olarak kullanma adına faydalı oluyor. Siz de mutlaka okuduğunuzla kalmayıp, buradaki işlemleri kendi kendinize uygulayınız. Bu yazıyla ilgili dosyaları ise bu bağlantıdan bilgisayarınıza indirebilirsiniz.

27 Temmuz 2008, 08:59 Programlama Bugün 43 kez, toplamda ise 1,925 kez okundu. ,
Yorum takibi Geri izleme Yazıyı Paylaş Yazıyı yazdır
35 yorum var
  1. MaFiAMaX 27 Temmuz 2008 11:29

    Her şey bir yana yazı başındaki konu görselini nasıl hazırladın? :)

    Mis gibi yazı olmuş.

  2. Erhan 27 Temmuz 2008 11:44

    Aslında o görsel tam istediğim gibi olmadı. Ama en azından bu yazıyla uyuşan bir görsel olduğunu düşünüyorum.

    Görseli hazırlarken Fireworks‘ün motion blur efektini kullandım. Bu efekt pekçok imaj işleme yazılımında var.

  3. TheBa2 27 Temmuz 2008 12:54

    Teşekkürler güzel paylaşım :) …
    Temanızı da gayet beğendim …
    Başarılar.

  4. deliblog 27 Temmuz 2008 13:17

    mafiamax’ın dediğini soracaktım. :)

  5. emin varol 27 Temmuz 2008 13:24

    teşekkürler eburhan yine faydalı bir jquery örnegi bu ülkede jquery kaynaklarında öncüsün…

  6. Oğuzhan Bugüş 27 Temmuz 2008 14:00

    Gerçekten yine çok başarılı bir anlatım yapmışsınız. Tebrik ederim.

  7. Erhan 27 Temmuz 2008 14:12

    Ben teşekkür ederim arkadaşlar ;)

  8. Baybars 27 Temmuz 2008 14:46

    Oldukça güzel bir uygulama olmuş. Teşekkürler.

  9. gevv 27 Temmuz 2008 16:29

    Ben bu yazı sayesinde fark ettim rozet resminde efekt olduğunu :) Teşekkürler Abi

  10. bilgisiz 27 Temmuz 2008 17:39

    Oldukça hoş bir uygulama ilerde işimize yaraya bilir…

  11. ümran 27 Temmuz 2008 18:35

    hep merak ettiğim ve çok hoşuma giden bir uygulamaydı.. teşekkürler

  12. hakan nural 27 Temmuz 2008 20:10

    çok güzelmiş ya ben de yeni farkettim:)

  13. Efecan 27 Temmuz 2008 20:21

    Yazıları merakla takip ediyorum. Loto gibi oldu benim için ‘Bakalım bu sefer konu ne?’ diye =)

  14. Web Öğrencisi 27 Temmuz 2008 21:23

    Ben de bu yaptığınızı ne zamandır yapmaya çalışıyordum. Burada anlatmanız benim için büyuk bir kolaylık oldu. Teşekkürler :)

  15. Mehmet ALP 27 Temmuz 2008 21:37

    Erhan bey gene farkınız göstermişssiniz(: güzel bir makale olmuş…
    ellerinize sağlık..

  16. mert 27 Temmuz 2008 23:50

    yine eburhan, her google reader’ı açtığım da hemen bakıyorum senden yeni yazı varmı diye :)

  17. Alper 28 Temmuz 2008 05:48

    Çok teşekkürler çok enfes bir anlatım olmuş.

  18. Oğuzhan Bugüş 28 Temmuz 2008 08:53

    Şahsen ben bu yazı yazılana kadar o rozetin çekilip bırakılabildiğini bilmiyordum.

  19. Kerem 28 Temmuz 2008 09:56

    Eline sağlık abi çok iyi anlatmışsın…

  20. Volkan Görgülü 28 Temmuz 2008 19:21

    İşte güzellik, çekicilik böyle güzel detaylarda saklı, çok basit olabilir ama çok başarılı bir atraksiyon :)

  21. gevv 28 Temmuz 2008 21:31

    artık siteye geldiğimde rozeti tırtıklamadan gitmiyorum :D

  22. Ekrem Büyükkaya 29 Temmuz 2008 02:56

    Teşekkürler

  23. Tabuhan 30 Temmuz 2008 21:52

    Sırf o rozetle oynamak için hergün ziyaret ediyorum siteni desem inanır mısın :)

    Şaka bir yana güzel çalışma eline sağlık.

  24. Fırat 31 Temmuz 2008 08:54

    Detaylı anlatımınız için teşekkürler. Sayenizde öğreniyorum bu gibi işleri. Başarılar.

  25. nebula 1 Ağustos 2008 11:11

    Rozetin nasıl yapıldığını merak ediyordum bu yazı iyi oldu teşekkürler.

  26. talat 5 Ağustos 2008 06:01

    paylaşım için çok teşekkürler. ben de kendi temamda kullanmak istiyorum böyle bişey ama,
    kodun { top:’-40px’, left:’-40px’}, bölümündeki left değerini right yaptığımızda rozet sadece aşağı yukarı sallanıyor. belirttiğimiz yerine gitmiyor. acaba bunu sağ tarafa hizalamanın bir yolu yok mudur?

    css kodunda böyle bir sorun yok. sağ tarafa da hizalanabiliyor. yardımcı olursanız sevinirim..

  27. Erhan 5 Ağustos 2008 11:59

    @talat
    Haklısın, Right değeri animate() ile istediğimiz şekilde çalışmıyor. Onun için ekstra kod yazmamız lâzım. Ben şöyle birşey yazdım ve çalışıyor:

    $(document).ready(function(){

	var Nesne  = $("div#rozet");
	var Konum  = Nesne.position();

	var Ustten =  Konum.top + 'px';
	var Soldan =  Konum.left + 'px';

	Nesne.easydrag().ondrop(function(){
		Nesne.animate(
			{ top:Ustten, left:Soldan },
			{duration: 1000, easing: 'easeOutElastic'}
		);
	});

});
  28. buzcevheri 5 Ağustos 2008 23:44

    Bunu post-it tadında yapabilmiş olsam arada bir kullanabilirim. Mesela bir kaç günlüğüne şehir dışına gideceğim zamanlar bloga “X süre yokum” gibisinden bu tarz bir not yazmak güzel olurdu. Ama beceremem ben bunu yapmayı. =)

  29. piteknoloji 7 Ağustos 2008 00:46

    oyun oynamaya buraya geliyorum artık.
    stresli anlarımın rahatlama formülü v2 rozetini çekip bırakmak.
    gerçekten çok güzel olmuş. teşekkürler.

  30. talat 7 Ağustos 2008 01:19

    teşekkür ederim erhan abi. yukarıdaki kod bi önceki kodun düzeltmesi mi yoksa sağa yaslamak için mi? çünkü orda da left değeri var.

  31. Erhan 7 Ağustos 2008 09:42

    Bu son yazdığım kod daha esnek oldu aslında :) Her durumda çalışabilir. Yani sağa, sola, alta, üste yaslaman farketmez. Kodda “left” değeri olması seni yanıltmasın.

  32. erdem arslan 18 Ağustos 2008 05:09

    valla burhan teşekkür ederim öncelikle. iyi oldu bu ilaç gibi de geldi. bir kaç position ayarından sonra fıstık gibi oldu açıkçası. ellerin dert görmesin. sağolasın…

  33. Ben yokken neler olmuş? - Günlük Haftalık Aylık
  34. Fatih Hayrioğlu'nun not defteri » 29 Temmuz 2008 web’den seçme haberler
  35. Seçme Linkler #2 » Blog Arşivi - gKAANs.oRg | teknoloji ve internet blogu!
İçinizde kalmasın, siz de yorum yazın

« WordPress için yazdığım “Fix Feed” eklentisi Css Round ile yuvarlak köşeli kutular hazırlamak »

Copyright © 2008 eburhan.com | Structure Theme | XHTML 1.0 | Yukarı