jQuery UI Drag & Drop Kullanımı

Herkese selamlar. Uzun bir aranın ardından teknik bir yazı ile karşınızdayım. Bu yazımda birkaç kez kullanmak durumunda kaldığım ve çok kaynağa erişemediğim jQuery UI kütüphanesine ait olan sürükle & bırak özelliğini ve kullanımını anlatacağım.

Öncelikle jQuery UI kütüphanesinin kendi sitesine buradan ulaşabilirsiniz. Öncelikle kütüphaneyi indirip kendi projenize eklemeniz gerekiyor. Bower, NPM gibi bir paket yöneticisi ile de projenize ekleyebilirsiniz.

Drag özelliği ile başlayalım. Bir html elementini draggable yapabilmek için öncelikle ona JavaScript tarafında draggable özelliğini tanımlamanız gerekiyor.

        

  

Drag me around

Burada gördüğünüz gibi id’ si draggable olan html nesnesine draggable özelliğini vermiş olduk. Bu sayede html nesnesi sayfa içerisinde sürüklenebilir nesneye dönüşmüş oldu.

Ekrandaki görüntüsü :

Drag me around yazılı nesne artık sürüklenebilir.

Draggable özellikleri

1- Auto Scroll özelliği

HTML nesnesini sürükler iken aynı zamanda sayfada veya bulunduğu başka bir HTML nesnenin içinde scroll özelliği kazanması için scroll değişkenine true değerini vermemiz gerekiyor.( Buradaki scroll nesneyi sürükledikçe çalışan scroll).

Kullanımına geçecek olursak :

Aynı zamanda scroll hızı ve hassaslığı gibi ayarlarda yapabiliyoruz. Bunların da örnekleri şu şekilde :

2- Axis ve Containment Özellikleri

Axis özelliği sürüklenebilir olan HTML nesnesinin sadece bir yönde ( x, y) hareket etmesi için kullanılır.

Containment ise sürüklenebilir olan HTML nesnesinin sadece kapsayıcı olarak verilen nesne içerisinde sürüklenebilir olmasını sağlar.

Örnek verecek olursak:

3- Cursor özelliği

Sürüklenebilir nesne için cursor özellikleri tanımlayabiliriz. Bu özelliğin amacı nesneye basılı tutup sürüklemeye başladığınız anda farenin ekranda alacağı şekil ve pozisyonu belirlemektir.

Cursor özelliği ile fare nesnesinin ekranda alacağı şekli belirlemektedir.

Cursor-at özelliği ise sürüklemeye başladığımız anda fare nesnesinin pozisyonunu belirlemektedir.

Örnek verecek olursak:

4- Draggable fonksiyonları

Sürüklenebilir html nesnesini kontrol etmenizi sağlayan fonksiyonlar bulunmaktadır. Fonksiyonlar Drag& Drop konusunda çok büyük önem arz etmektedir.

Bu fonksiyonlar aşağıdaki gibidir.

Start : Sürüklemeye başladığınız anda bir seferliğine çalışan fonksiyondur. Nesneyi tuttuğunuz anda çalışır ve sonrasında tekrar sürükleyene kadar çalışmaz.

Drag : Drag fonksiyonu sürüklemeye başladığınız andan bıraktığınız ana kadar nesne ekranda yer değiştirdikçe çalışır. Tahmin edeceğiniz gibi drag fonksiyonu sürükleme esnasında çok fazla kez çalışır.

Stop : Stop fonksiyonu ise sürüklenebilir nesneyi bıraktığınız anda bir seferliğine çalışan fonksiyondur. Tekrar sürükleyip bırakana kadar çalışmaz.

Örneklerine gelecek olursak :

Burada belirtmek istediğim bir konu daha var; her fonksiyonda bulunan event ve ui parametreleri ne işe yarar? Drag&Drop kullanırken çok kullandığım 2 parametre event ve ui parametreleridir. Bu parametreler sayesinde sürüklediğiniz nesnenin id, class gibi özelliklerine ulaşabildiğiniz gibi tasarım vs. gibi özelliklerini de değiştirebiliyorsunuz. Aralara yazdığım “console.log” komutları ile daha detaylı bir şekilde inceleyebilirsiniz.

5- Revert özelliği

Revert adından da anlaşılabileceği gibi bir nesneyi sürükledikten sonra sürüklemenin başladığı pozisyona dönmeyi sağlayan özelliktir.

Örneğine gelecek olursak:

Drop özelliği ise ekranda bulunan sürüklenebilir bir HTML nesnesinin ( draggable özelliğine sahip olan) başka bir HTML nesnesi üzerine bırakılmasını sağlar. Yani sürükleme ve bırakma işlemi her ikisini de yapmak istiyorsak hem draggable hem droppable özelliklerini beraber kullanmak zorundayız.

Hemen bir örnek ile gösterecek olursak :

  

Drag me to my target

Drop here

Bu kodu çalıştırdığınızda karşınıza şu şekilde bir ekran gelecektir.

Soldaki nesneyi sürükleyip sağdaki nesne içerisine bıraktığınızda ise sonuç aşağıdaki gibi olacaktır.

Burda drop adlı fonksiyonu da kod içerisinde kullandık. Draggable 3 fonksiyon var iken droppable da sadece 1 fonksiyon bulunmaktadır.

Drop : Sürüklenebilir olan HTML nesnesi droppable olan nesne içerisine bırakıldığında bir kereliğine çalışan fonksiyondur.

Droppable özellikleri

Burada en çok kullanılan özellik olan accept özelliğini anlatacağım. Ekranda bulunan sürüklenebilir nesnelerden hangisinin veya hangi css sınıfına sahip olanların droppable nesne tarafından kabul edileceğini belirlemek için kullanılır.

Örneğe gelecek olursak:

    

I'm draggable but can't be dropped

Drag me to my target

accept: '#draggable'

Buradaki kodun ekran görüntüsü aşağıdaki gibi olacaktır :

Soldaki nesneyi sürükleyip bıraktığımızda droppable nesnemizin accept kısmında sürüklediğimiz nesne olmadığı için css sınıfları da drop fonksiyonu da çalışmadı.

Ancak sağdaki sürüklenebilir nesneyi droppable nesne üzerine bırakırsak css sınıfları ve drop fonksiyonu çalışacaktır.

Arkadaşlar bu yazımda birkaç kere kullanmak zorunda kaldığım ve her seferinde uzun arayışlar sonucunda işlerimi bitirebildiğim bir konu olan Drag&Drop konusunu konu aldım. Umarım bu konuda çalışan veya çalışmayı düşünenler için faydalı olur.

Okuduğunuz için teşekkür ederim. Paylaşım ve alkışlar motivasyonu artıracaktır :).

Bir sonraki yazıda görüşmek üzere…

Leave a Reply

Your email address will not be published. Required fields are marked *