HTML5 Drag and Drop (Sürükle ve Bırak) İşlemi

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.

Html5 Drag And Drop

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:

Html5 Drag And Drop
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.

Html5 Drag And Drop
ondrop

Sürüklenen veri bırakıldığında, bırak olayı tetiklenir.

Html5 Drag And Drop
Tarayıcı Desteği
Internet Explorer 9, Firefox, Chrome, ve Safari Sürükle ve Bırak özelliğini desteklemektedir.

Yorum Ekle

This blog is kept spam free by WP-SpamFree.