HTML5 Drag ve Drop Özelliği (Sürükle ve Bırak)
- Sürükle ve bırak özelliği, bir HTML5 standartıdır.
- Bir objeyi, bir konumdan başka bir konuma sürüklemek için kullanılan oldukça yaygın bir özelliktir.
- Sürükle ve bırak; HTML5 standartlarının bir parçasıdır ve her html elementi sürüklenebilir.
Tarayıcı Desteği
Aşağıdaki tabloda, tarayıcıların hangi sürümlerinden itibaren sürükle ve bırak özelliğini desteklediği verilmiştir:
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Sürükle ve Bırak Örneği
Aşağıda bir sürükle ve bırak örneği verilmiştir:
<!DOCTYPE HTML>
<html>
<head>
<script>
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>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="resim.gif" draggable="true"
ondragstart="drag(event)" width="336" height="569">
</body>
</html>
Kodlar biraz karmaşık gelebilir. Hadi bu kodları mercek altına alıp inceleyelim:
- Öncelikle, sürüklenebilir bir html elemanı oluşturalım. draggable="true" özelliği html elemanlarını sürüklenebilir yapar : <img draggable="true">
- Bundan sonraki aşamada, html elemanı sürüklendikten sonra neler olacağını belirlememiz gerekiyor.
- ondragstart="drag(event)" özelliği, drag() fonsiyonunu çağırır. drag() fonksiyonu da hangi verinin sürükleneceğini belirler. Bu fonksiyondaki dataTransfer.setData() metodu, sürüklenen verinin tipini ve değerini belirler.
- function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
} kodunda, sürüklenecek verinin tipi "text", değeri de elemanın id'si olarak ayarlanmıştır.("drag1") - ondragover olayı (event), sürüklenecek objenin nereye bırakılacağını belirler.
- Varsayılan olarak, html elemanları sürüklenebilir değildir.
- Sürükleyip bırakabilmek için, html nesnelerinin varsayılan değerlerini değiştirmemiz gerekir. Bu iş, event.preventDefault() metodunu çağırarak yapılıyor Bu metot da allowDrop() fonksiyonunda çalıştırılmış. ondragover="allowDrop(event)" kodu ile bu metodu çağırmış oluyoruz. Böylece bu html elemanına, sürüklediğimiz bir nesneyi bırakabiliyoruz.
- Sürüklenen veri bırakıldığında bir bırakma (drop) olayı (event) gerçekleşir. Şu kodlar, ondrop özelliğine drop() fonksiyonunu çağırır: ondrop="drop(event)"
- drop() fonksiyonundaki preventDefault() metodu varsayılan değerleri görmezden gelmeyi sağlar.
- Sürüklenen data, dataTransfer.getData() methodu ile alınır. Bu metot, setData() methodunda döndürülen ve tipleri aynı olan bütün dataları döndürür.
- Sürüklenen data, sürüklenen html elemanının id'sidir. ("drag1")
- Böylece, sürüklenen data, bırakılacak elemana yerleştirilir.
Hiç yorum yok:
Yorum Gönder