HTML Drag – Drop API (Sürükle Bırak)

HTML’de herhangi bir öğe sürüklenip bırakılabilir.

Sürükle Bırak

Sürükle ve bırak çok yaygın bir özelliktir.

Tarayıcı Desteği

Sürükle ve Bırak’ı tam olarak destekleyen ilk tarayıcı sürümleri;

HTML Sürükle Bırak Örnekleri

Aşağıdaki örnek basit bir sürükle ve bırak örneğidir:

<!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="turkYazilimciLogo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Bir Öğeyi Sürüklenebilir Hale Getirme

Öncelikle: Bir öğeyi sürüklenebilir hale getirmek için draggable niteliğini true olarak ayarlayın:

<img draggable="true">

ondragstart ve setData()

Ardından, öğe sürüklendiğinde ne olması gerektiğini belirtin.

Yukarıdaki örnekte, ondragstart niteliği hangi verilerin sürükleneceğini belirten drag(event) işlevini çağırır.

dataTransfer.setData() yöntemi, sürüklenen verilerin veri türünü ve değerini ayarlar:

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

Bu durumda, veri türü “text”tir ve değer, sürüklenebilir öğenin id değeri (“drag1”) dir.

ondragover Niteliği

Ondragover olayı, sürüklenen verinin nereye bırakılabileceğini belirtir.

Varsayılan olarak veriler/öğeler diğer öğelerin içine bırakılamaz. Bir düşüşe izin vermek için öğenin varsayılan işlenmesini engellememiz gerekir.

Bu, ondragover olayı için event.preventDefault() yöntemi çağrılarak yapılır:

event.preventDefault()

ondrop Niteliği

Sürüklenen veri bırakıldığında bir bırakma olayı meydana gelir.

Yukarıdaki örnekte, ondrop özelliği drop(event) işlevini çağırır:

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
17 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir