Sürükle bırak işlemi HTML5 ile kolaylaştı. Sürükle bırak işlemi bir çok programlama dilinde kullanılmaktadır. Bir nesneyi tutup diğer bir konuma taşıyarak “sürükle bırak” işlemi gerçekleştirilir.
draggable Özelliği
Elemanın “draggable” özelliği “true” olarak verdiğimizde elemanımız artık sürüklenebilir olacağını belirtiyoruz.
ondragstart ve setData()
Yukarıda ki örnekte img etiketi içinde ondragstart=”drag(event)” kullanmıştık bu, şu anlama geliyor; ondragstart, sürükleme işleminin başladığını belirtmekte, tırnak içerisinde ki değerde drag fonksiyonunu “event” parametresini alarak çalıştır demektir. Burada ki “event” Tarayıcı eventı.
dataTransfer.setData() yöntemi, veri türü ve sürüklenen veri değerini belirler:
ondragover
Ondragover olayı sürüklenen verilerin bırakıldığını bildirir. Varsayılan olarak veri diğer öğelerin içine bırakılamaz. Bunun için event.preventDefault() metodunu çağırarak izin vermeliyiz.
ondrop
Sürüklenen veri bırakıldığında, bırak olayı tetiklenir.
Tarayıcı Desteği
Internet Explorer 9, Firefox, Chrome, ve Safari Sürükle ve Bırak özelliğini desteklemektedir.