HTML Sürükle ve Bırak API'si
HTML'de herhangi bir öğe sürüklenip bırakılabilir.
Örnek
W3Schools görüntüsünü dikdörtgenin içine sürükleyin.
Sürükle ve bırak
Sürükle ve bırak çok yaygın bir özelliktir. Bir nesneyi "yakaladığınız" ve onu farklı bir konuma sürüklediğiniz zamandır.
Tarayıcı Desteği
Tablodaki sayılar, Sürükle ve Bırak özelliğini tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| 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ğıdaki örnek basit bir sürükle ve bırak örneğidir:
Örnek
<!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="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Karmaşık görünebilir, ancak bir sürükle ve bırak olayının tüm farklı kısımlarını inceleyelim.
Bir Öğeyi Sürüklenebilir Yap
Her şeyden önce: Bir öğeyi sürüklenebilir yapmak için draggableniteliği true olarak ayarlayın:
<img draggable="true">
Ne Sürüklenir - ondragstart ve setData()
Ardından, öğe sürüklendiğinde ne olacağını belirtin.
Yukarıdaki örnekte, ondragstartöznitelik, hangi verilerin sürükleneceğini belirten bir işlevi, sürükle(olay) çağırır.
Yöntem dataTransfer.setData(), veri türünü ve sürüklenen verinin değerini ayarlar:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
Bu durumda, veri türü "metin"dir ve değer, sürüklenebilir öğenin kimliğidir ("drag1").
Nereye Bırakılır - ondragover
Olay ondragover, sürüklenen verilerin nereye bırakılabileceğini belirtir.
Varsayılan olarak, veriler/öğeler diğer öğelere bırakılamaz. Bir düşüşe izin vermek için, öğenin varsayılan olarak işlenmesini engellemeliyiz.
Bu, event.preventDefault()ondragover olayının yöntemini çağırarak yapılır:
event.preventDefault()
Damlayı Yap - ondrop
Sürüklenen veri bırakıldığında bir bırakma olayı meydana gelir.
Yukarıdaki örnekte, ondrop niteliği bir işlevi çağırır, drop(event):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Kod açıkladı:
- Verilerin tarayıcı tarafından varsayılan olarak işlenmesini önlemek için önlemeDefault() öğesini çağırın (varsayılan, açılırken bağlantı olarak açıktır)
- Sürüklenen verileri dataTransfer.getData() yöntemiyle alın. Bu yöntem, setData() yönteminde aynı türe ayarlanmış tüm verileri döndürür.
- Sürüklenen veri, sürüklenen öğenin kimliğidir ("sürükle1")
- Sürüklenen öğeyi açılan öğeye ekleyin
Daha fazla örnek
Örnek
Bir görüntüyü iki <div> öğesi arasında ileri geri sürükleme (ve bırakma):