HTML5 Sürükle Bırak
HTML5 ile birlikte uygulanması daha kolay hale gelen ve web sayfalarında yaygın olarak kullanılan sürükle bırak özelliği ile ilgili bilgiler yer alıyor.
HTML5 sürükle bırak
Sürükle bırak yöntemi yaygın olarak kullanılan bir özelliktir.
Bir nesneyi seçip başka bir alana taşımayı sağlar.
Sürükle bırak özelliği HTML5 ile birlikte tüm nesnelere uygulanabilir.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5 Sürükle Bırak</title>
<style>
#alan {
width: 250px;
height: 250px;
padding: 10px;
border: 1px solid #cccccc;
}
#resim {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="alan" ondrop="birak(event)" ondragover="return false;"></div>
<br />
<img id="resim" src="elma.jpg" draggable="true" ondragstart="surukle(event)" width="250" height="250" alt="Elma" />
<script>
function surukle(o) {
o.dataTransfer.setData("text", o.target.id);
}
function birak(o) {
o.preventDefault();
var veri = o.dataTransfer.getData("text");
o.target.appendChild(document.getElementById(veri));
}
</script>
</body>
</html>Etiketi sürüklenebilir yapmak
Sürükle bırak özelliğini uygulamak için öncelikle draggable özelliğini true olarak belirliyoruz.
function surukle(o) {
o.dataTransfer.setData("text", o.target.id);
}Metod içerisindeki dataTransfer.setData metodu sürüklenen nesnenin bilgilerini hafızada tutmak için kullanılır.
Artık dataTransfer nesnesi id değerini veri türü text olan alanda saklar.
ondragover özelliği
Sürükleme işlemi tamamlanınca nesnenin ondragover özelliği tetiklenir.
Varsayılan olarak nesneler başka nesnelere taşınmaz.
Varsayılanı kaldırmak ve taşımaya izin vermek için ondragover özelliğine return false; değerini atayabilir veya aynı işlevi gören event.preventDefault metodunu da kullanabiliriz.
ondragover="return false;"ondrop özelliği
Sürükleme işlemi tamamlanınca nesnenin ondrop özelliği tetiklenir.
function birak(o) {
o.preventDefault();
var veri = o.dataTransfer.getData("text");
o.target.appendChild(document.getElementById(veri));
}Kod açıklaması,
- Varsayılan olarak nesne sürüklenip bırakılınca sürüklenen nesnenin adresi açılır. Varsayılanı devre dışı bırakmak için sürüklenen nesnenin preventDefault metodunu kullanıyoruz.
- dataTransfer.getData metodu sürükleme başladığında dataTransfer.setData metodu ile hafızaya kaydettiğimiz bilgileri alıyoruz ve değişkene atıyoruz.
- appendChild metodu ile sürüklenen elemanı bırakılan elamana ekliyoruz.
HTML5 Derslerine buradan ulaşabilirsiniz…
Hayırlı günler dilerim.