Web Programlama

HTML5'te Sürükle Bırak (Drag & Drop)

Lisans: Creative Commons 26.11.2020 tarihinde güncellendi

Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

HTML5'te, herhangi bir eleman için ekranın bir yerine sürükleme işlemi uygulanabilir ayrıca native bir sürükle-bırak API'ını hizmete sunmaktadır.

Sürükle-bırak işlemi ile ilişkili en çok kullanılan olaylar aşağıda listelenmiştir:

ondragstart: Kullanıcı bir nesneyi sürüklemeye başladığı anda oluşur.
ondragenter: Sürükleme oluşurken, farenin hedef elemanın üzerine hareket ettirilmesiyle oluşur.
ondragover: Sürükleme meydana geldiği zaman farenin bir elemanın üzerine hareket ettirilmesiyle tetiklenen olaydır.
ondrag: Nesne sürüklenirken fare hareket ettirildiği sürece oluşan olaydır.
ondragleave: Bir sürüklenme oluşurken farenin bir elemanı bırakmasıyla oluşur.
ondrop: Sürükleme sonunda, bırak işlemi oluştuğu zaman tetiklenir.
ondragend: Sürükleme esnasında kullanıcı farenin düğmesini bırakınca oluşur.

Aşağıdaki kod parçasını çalıştırdıktan sonra, fare yardımıyla mor renkli ve üzerinde "Sürükle" yazan dikdörtgeni sürükleyerek hareket ettirelim; fare bırakılınca nesne eski konumuna dönecek.

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            #KUTU1, #KUTU2 {
                float:left;padding:10px;margin:10px; -moz-user-select:none;
            }
        #KUTU1 { background-color: #6633EF; width:85px; height:85px;  }
        #KUTU2 { background-color: #FF6699; width:160px; height:170px; }
            </style>
        <script type="text/javascript">
            function dragStart(ev) {
                ev.dataTransfer.effectAllowed='move';
                ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
                ev.dataTransfer.setDragImage(ev.target,0,0);
                return true;
            }
        </script>
    </head>

    <body>
        <center>
            <h2>SURUKLE BIRAK-HTML5</h2>
            <div>UYGULA</div>
            <div id="KUTU1" draggable="true"
                ondragstart="return dragStart(event)">
                <p>SURUKLE</p>
            </div>
            <div id="KUTU2"></div>
        </center>
    </body>
</html>

İşlem adımları

İlk adımda ilgili elemanı sürüklenebilir (draggable) hale getirmelisiniz. Bu amaçla aşağıdaki ifadeyi kullanabilirsiniz:

<img draggable="true">

Bir sonraki adım, eleman sürüklenirken ne yapılacağını tanımlamaktır:

<img id="surukle_nesne" src="xx.png" draggable="true" ondragstart="drag(event)">

Bir sonraki adımda ise veri tipi ve sürüklenecek elemanın id'si tanımlanmalıdır. Bu örnekte veri tipi "text" ve sürüklenecek eleman id'si "surukle_nesne" dir:

function drag(event)
{
     event.dataTransfer.setData("Text",event.target.id);
}

ondragover olayı, sürüklenen nesnenin nerede bırakılacağını belirler. Böylece ondragover olayı için bir eventListener eklemeniz gerekir:

function allowDrop(event)
{
    event.preventDefault();
}

Bırak (drop) olayının kabul edilmesi için, "bırak" hedefi, "bırak" olayını dinlemelidir; o nedenle bir ondrop="drop(event)" komutu da eklenmelidir:

<div id="divMain" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Sonuç olarak sürüklenen eleman bırak elemanına eklenecektir.

Sınava Gir