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

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

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.

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