Sürükle / Bırak (Drag & Drop)

Bu derste HTML5 ile gelen sürükle-bırak (Drag & Drop) API’sinin nasıl çalıştığı ve basit bir sürükle-bırak uygulamasının nasıl oluşturulduğu anlatılmaktadır. HTML, CSS ve JavaScript birlikte kullanılarak etkileşimli sürükleme deneyimi örneklerle açıklanır.

admin admin
Kasım 2, 2022 - 11:33 Updated: Ocak 9, 2026 - 00:22
0 390
Sürükle / Bırak (Drag & Drop)
Sürükle Bırak (Drag & Drop)

Sürükle / Bırak (Drag & Drop) Nedir?

Sürükle / bırak, kullanıcıların fare ile bir nesneyi seçip bir başka hedefe taşımasını sağlayan etkileşimli bir tekniktir. HTML5 ile birlikte bu işlem tarayıcı içinde standart şekilde desteklenir ve JavaScript olaylarıyla kontrol edilir.

HTML5 sürükle-bırak API’si, öğelerin draggable özniteliğini ve olay dinleyicilerini kullanarak nesnelerin sürüklenmesini ve bırakılmasını sağlar.

Nasıl Çalışır?

Sürükle / bırak işlemi 3 temel aşamadan oluşur:

  1. Sürükleme Başlatma – dragstart

  2. Hedefe Gelme – dragover

  3. Bırakma – drop

Bu işlemlerde JavaScript olayları tetiklenir ve veri taşınması için dataTransfer nesnesi kullanılır.

Basit HTML Sürükle / Bırak Örneği

Aşağıda bir kutu içine sürüklenebilecek basit bir öğe örneği yer almaktadır.

HTML
Buraya bırak
Sürükle


    
        function dragBaslat(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }
        function dragOverOlay(ev) {
            ev.preventDefault();
        }
        function dropOlay(ev) {
            ev.preventDefault();
            var veri = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(veri));
        }

Kod Açıklaması

draggable="true"

Bu öznitelik, öğeyi sürüklenebilir hâle getirir.

ondragstart

Sürükleme başladığında çalışır ve taşınacak öğenin ID bilgisini transfer nesnesine kaydeder.

ondragover

Varsayılan olarak bir öğe üzerine sürükleme bırakma izni yoktur. Bunu aktif hale getirmek için event.preventDefault() çağrılır.

ondrop

Sürüklenen öğe hedef alana bırakıldığında çalışır; transfer edilen ID ile öğe hedefe eklenir.

Gelişmiş Sürükle / Bırak Örneği

Birden fazla öğeyi taşımak veya hedef alanı vurgulamak için CSS ve JavaScript ile ek stiller uygulanabilir: 




    function dragOverOlay(ev) {
        ev.preventDefault();
        ev.target.classList.add("onSurukleme");
    }
    function dropOlay(ev) {
        ev.preventDefault();
        ev.target.classList.remove("onSurukleme");
        var veri = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(veri));
    }

Bu yapı, sürükleme sırasında hedef alanı görsel olarak vurgular.

Sürükle / Bırak Nerelerde Kullanılır?

  • Dosya yükleme alanları

  • Puzzle ve oyun uygulamaları

  • Listelerde öğe yeniden sıralama

  • Yönetim paneli arayüzleri

  • Kullanıcı etkileşimi gerektiren form alanları

HTML5 sürükle-bırak desteği GUI’ler için etkileşimli ve sezgisel öğeler sağlar.

Dikkat Edilmesi Gerekenler

  • Tarayıcı desteği çoğu modern tarayıcıda vardır ancak eski tarayıcılarda sınırlı olabilir.

  • Mobil cihazlarda doğrudan drag & drop desteği daha sınırlı olabilir.

  • Sürükle bırak olaylarını yönetmek için JavaScript bilgisi gereklidir.

Etiketler: