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:

Html kodlaması Css ile biçimlendirme ve konumlandırma 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.

<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>

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:

<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>

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:

<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:

<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>

Ö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 1 kez, toplamda ise 5,736 kez okundu. css, jquery
44 yorum var

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

Mis gibi yazı olmuş.

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.

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

mafiamax’ın dediÄŸini soracaktım. :)

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

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

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

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

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

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

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

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

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

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 :)

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

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

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

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

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

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

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

Teşekkürler

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.

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

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

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

@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'}
                );
        });

});

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ı. =)

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.

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.

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.

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…

Ben de bunu moo.fx de görmüştüm dikkatimi çekmişti ama uyarlamaya sıra gelince bir iki denemede çalışmadı bıraktım peşini. Sonra önceki gün gopof hakkındaki yazıyı okurken sizde gördüm yine dikkatimi çekti. Ben de bir benzerini kullanıyorum zaten ama o sürüklediğim yerde kalıyor eski yerine gitmesi için ufak bir ayar gerekli sanırım bunu tekrar deneyeceğim. Olmasa sorarım haberiniz olsun :)

Teşekkürler tüm işlemleri yaptım ve oldu daha sonra tema dosyamın içine rozet.png - jquery.js - jquery.easydrag - jquery.esaing dosyalarını attım fakat anasayfamda sizinki gibi nasıl gösterebilirim ?

nefis bir makale.
zaman ayırıp anlattığın için teşekkürler.

harika bir çalışma olmuÅŸ gerçekten. Ben bunu MyBB forumlarımdan birine uyguladım. js leri derlemem konudaki linki görmememden dolayı biraz zor oldu açıkçası ama google saÄŸolsun kırmadı beni… Sonradan görüncede linki tabi içime bir hüzün doldu…

Herneyse, küçük bir sorunum var. Bırakılan nesne yerine dönmek için herhangi bir aksiyon yapmıyor. bekliyor bekliyor tanımlanan süre kadar bekliyor ardından birden bire kendini olması gereken yere gönderiyor.

Çok güzel bir yazı olmuş teşekkür ederim fakat benim bir sorum oalcak ben bu aşğıda örnek olrak yazdığım kodları nerede kullancağım yani ben başka bir js kullanımı yapacağım ama wpde bunun nasıl kullanılacağını bilmiyorum bunu anlatırsanız sevinirim. yani örnek bu çek bırakta bunu header dosyası içinde div lerden önce mi kullanıyoruz yoksa bunları başka yere mi yazıyoruz.

örnek:
$(document).ready(function(){

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

$(”div#rozet”).ondrop(function(){

$(’div#rozet’).animate(

Çok Harika Bi Olay, Teşekkürler Deniycem :D

Gayet açıklayıcı ve güzel bir yazı olmuş, jquery ile ilgili yeni yazılarınızı bekliyorum. :)

internet explorer arkaplan sorununu çözdüm ama farklı yöntemle .erhan arkadaşım saol paylaşım için

İçinizde kalmasın, siz de yorum yazın


You are viewing a mobilized version of this site...
View original page here

How do you rate mobile version of this page?

Mobilized by Mowser Mowser