Elementi Sürüklenebilir Hale Getirme:

draggable="true"

attribute'ü kullanarak bir elementi sürüklenebilir hale getirin 12. Örneğin:

<img draggable="true" src="image.png">

1.

Sürükleme Davranışını Tanımlama: Sürükleme işlemini başlatan olayı ve sürüklenecek veriyi belirlemek için

ondragstart

event'ini kullanın ve bu event'te

drag(event)

fonksiyonunu çağırın 13. Bu fonksiyon,

event.dataTransfer.setData()

metodu ile sürüklenecek verinin tipini ve değerini ayarlar 3.

Bırakma Hedefini Etkinleştirme: Sürüklenen verinin bırakılabileceği bir hedef (drop target) oluşturmak için

ondragover

event'ini kullanın ve

event.preventDefault()

metodu ile tarayıcının varsayılan davranışını önleyin 13. Örneğin:

<div ondragover="event.preventDefault()"></div>

1.

Bırakma İşlemini Gerçekleştirme:

ondrop

event'ini kullanarak bırakma işlemini tamamlayın ve sürüklenen veriyi hedef alana yerleştirin 13. Örneğin:

<div ondrop="drop(event)"></div>

1.