HTML5 Taşıma

Lütfen CodeW3C.com resmini düzgeleğe 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'yı tamamen destekleyen 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.

Bir 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()

Ardından, element sürüklendiğinde gerçekleşecek olayları belirleyin.

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 öğenin id'si ("drag1")dır.

Nereye sürükle - ondragover

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

Varsayılan olarak, veri/elementlerin diğer elementlere yerleştirilemeyeceği belirtilmiştir. Sürükle ve bırak işlevini gerçekleştirmek için bu elementlerin bu tür varsayılan işleme yöntemlerini engellememiz gerekmektedir.

Bu görev, ondragover olayının event.preventDefault() yöntemi tarafından tamamlanır:

event.preventDefault();

Yerleştirme - ondrop

Sürüklenecek veriyi bırakırken drop olayı meydana gelir.

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 engellemek 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 içeren getData() yöntemi ile sürüklenecek veriyi alın. Bu yöntem, setData() yönteminde aynı türde olarak ayarlanan herhangi bir veriyi döndürecektir
  • Sürüklenecek veri sürüklenecek elementin id'sidir ("drag1")
  • Sürüklenecek elementi yerleştirme elementine ekleyin

Daha Fazla Örnek

Görüntü sürükle ve bırak

İki <div> elementi arasında nasıl görüntü sürüklenir ve bırakılır:

Lütfen CodeW3C.com resmini düzgeleğe sürükleyin.

Kişisel olarak deneyin