HTML5 Taşıma

Lütfen CodeW3C.com resmini dikdörtgen içine sürükleyin.

Sürükle ve bırak

Sürükle ve bırak (Drag ve Drop) çok yaygın bir özelliktir. Bu, bir şeyi yakalayıp farklı bir konuma sürüklemek anlamına gelir.

Sürükle ve bırak HTML5 standartlarının bir parçasıdır: Her element sürüklenebilir hale gelir.

Tarayıcı Desteği

Tablodaki rakamlar sürükle ve bırak'nın tamamen desteklenen ilk tarayıcı sürümünü gösterir.

API
Sürükle ve bırak 4.0 9.0 3.5 6.0 12.0

HTML Sürükle ve Bırak Örneği

Aşağıda sürükle ve bırak hakkında basit bir örnek verilmiştir:

Ö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>

Kişisel olarak deneyin

Bu biraz karmaşık gibi görünse de, sürükle ve bırak olaylarının tüm farklı bölümlerini inceleyelim.

Elementi sürüklenebilir hale getir

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

<img draggable="true">

Sürükle ve bırak içeriği - ondragstart ve setData()

Sonra, element sürüklendiğinde ne olacağını belirler.

Yukarıdaki örnekte, ondragstart özelliği bir drag(event) fonksiyonunu çağırır ve sürüklenecek veriyi belirler.

dataTransfer.setData() metodu sürüklenebilir verinin veri türünü ve değerini ayarlar:

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

Bu örnekte, veri türü "text" ve değer bu sürüklenebilir elementin id'sidir ("drag1").

Nereye sürüklenir - ondragover

ondragover olayı, sürüklenecek verinin nereye yerleştirilebileceğini belirler.

Varsayılan olarak, veri/elementler diğer elementlere yerleştirilemez. Sürükleyip bırakma işlevini gerçekleştirmek için bu elementin bu tür varsayılan işleme yöntemini önlememiz gerekmektedir.

Bu görevi ondragover olayının event.preventDefault() metodu tamamlar:

event.preventDefault()

Yerleştirme - ondrop

Sürükleme verisini bırakırken drop olayı tetiklenir.

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

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Kod Açıklaması:

  • drop() olayının varsayılan tarayıcı işleme yöntemini önlemek için preventDefault() çağrısı yapın (drop olayının varsayılan davranışı bağlantı olarak açmaktır)
  • setData() yönteminde aynı türde olarak ayarlanan herhangi bir veriyi döndüren getData() yöntemi ile sürüklenecek veriyi elde edin. Bu yöntem, setData() yönteminde aynı türde olarak ayarlanan herhangi bir veriyi döndürür
  • Sürüklenecek veri sürüklenecek elementin id'sidir ("drag1")
  • Sürüklenecek elementi yerleştirme elementine ekleyin

Daha Fazla Örnek

Resmi sürükleyip bırakma

İki <div> elementi arasında resmi nasıl sürükleyip bırakılır:

Lütfen CodeW3C.com resmini dikdörtgen içine sürükleyin.

Kişisel olarak deneyin