HTML5: Sürükle ve bırak özelliği

18 Nisan 2017

Sürükle ve bırak artık HTML5 için vazgeçilemez bir özellik oldu. Basit bir kullanım şekli olan bu özellik, kullanıcılara büyük ölçüde kolaylık sağlıyor. Sürükle ve bırak özelliği tüm nesnelere uygulanabiliyor. Bir nesneyi tutup diğer bir konuma taşıyarak "Sürükle ve bırak (Drag and drop)" işlemini gerçekleştirmiş oluyoruz. Bu özellik hâlihazırda birçok dil üzerinde de kullanılmaktadır.

<script type="text/javascript">
function allowDrop(ev){
    ev.preventDefault();
}
function drag(ev){
    ev.dataTransfer.setData("text",ev.target.id);
}
function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
<div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="logo" src="https://www.w3schools.com/images/w3schoolscom_gray.gif" draggable="true"
ondragstart="drag(event)" width="150" height="28" />

Elemana draggable özniteliğini "true" olarak verdiğimizde elemanımız artık sürüklenebilir olacaktır.

<img draggable="true" /">