Sürükle ve Bırak bir nesneyi bulunduğu konumdan alıp başka bir konuma yerleştirme işlemidir. Sürükle ve Bırak işlemi HTML5’den önce Javascript ile yapılıyordu ancak bu işlem HTML5′de standart haline gelmiştir. Böylece bir nesne bir yerden başka bir yere taşınabilir.
Sürükle-bırak işlemi sırasında en çok kullanılan durumlar:
- 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.
Draggable özelliğini true yapmak o elemanı bulunduğu konumdan sürükleyebilmemizi sağlar.
Sürüklenecek veri tipi ve değeri dataTransfer.setData metoduyla belirlenir. Normalde sürükenen nesne bir yere bırakılamaz bu yüzden event.preventDefault() özelliğini kullanarak başka bir nesnenin içine bırakılmasını sağlarız.
DataTransfer.getData metodu bize dataTransfer.setData metodunda tanımlanmış veriyi döndürür ve bu şekilde bu veriyi yani sürüklenen nesneyi hedefine ekleriz.
Sürükle bırak özelliği sayesinde hem bir objeyi taşımakla kalmaz ayrıca çeşitli uygulamalar arasında veri de taşırız.
Tüm tarayıcılar bu özelliği desteklemektedir.
Şimdi bir örnek yapalım.
<!DOCTYPE HTML>
<html>
<head>
<style type = "text/css">
#div1, #div2 {float:left; width:120px; height:65px;margin:11px;padding:11px;border:3px solid red;}
</style>
<script>
function dropItem(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var abc = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(abc));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="dropItem(event)">
<img src ="elma.png" draggable="true" ondragstart="drag(event)" id="resim" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="dropItem(event)"></div>
</body>
</html>
Çalıştırdığımızda ekranda 2 kutu ve sol taraftaki kutuda bir elma resmi görürüz:
Bu resmi sol kutudan sağ kutuya taşıyabiliriz.
Html5 Sürükle-Bırak örnek çalışmasını
buradan görebilirsiniz.
