Okan ACAR

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.

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.

İşlem adımları

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

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

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:

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

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:

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

Okan ACAR

Ben Okan ACAR, 1993 Uşak Doğumluyum. 2012 Yılında Front End ile Tanıştım. Bunun Yanı Sıra Birçok Proje ve Şirketlerde Çalıştım.
Tasarım Sürecim Çok Zengin ve Görseldir.

Benim için Tasarım Bir Tutkudur. Sadece Bir İş Değil!

Yorum ekle

Çok Okunan Yazılarım