ondrop Olay

Örnek

Bir sürüklenebilir öğesi bir düştü edildiğinde bir JavaScript Yürütme <div> elemanı:

Daha "Try it Yourself" Aşağıdaki örnekler.

Tanımı ve Kullanımı

Bir sürüklenebilir eleman veya metin seçimi geçerli bir damla hedefe bırakıldığında zaman ondrop olayı oluşur.

Sürükle ve bırak HTML5'teki çok yaygın bir özelliktir. Eğer zaman olduğu "grab" bir nesneyi ve farklı bir konuma sürükleyin. Daha fazla bilgi için, bizim HTML Eğitimi bkz HTML5 sürükle ve bırak .

Not: Bir eleman sürüklenebilir hale küresel HTML5 kullanmak için sürüklenebilir niteliği.

İpucu: Bağlantılar ve resimleri varsayılan olarak sürüklenebilir, ve gerek yoktur draggable niteliği.

Orada kullanılan birçok olaylardır ve sürükle ve bırak işleminin farklı aşamalarında ortaya çıkabilir:

Sürüklenebilir hedefe ateş Olaylar (the source element) :
- ondragstart - Kullanıcı bir eleman sürüklemek başladığında meydana
- ondrag - bir eleman sürüklenirken oluşur
- ondragend - Kullanıcı elemanı sürükleme bittikten oluşur

Damla hedef üzerinde ateş Olaylar:
- OnDragEnter - sürüklenen eleman bırakma hedefi girdiğinde
- OnDragOver - sürüklenen eleman bırakma hedefinin üzerinde olduğunda oluşur
- ondragleave - sürüklenen eleman bırakma hedefi ayrıldığında oluşur
- ondrop - sürüklenen eleman damla hedefe bırakıldığında oluşur

Tarayıcı Desteği

Tablodaki rakamlar tamamen olayı destekleyen ilk tarayıcı sürümü belirtin.

Olay
ondrop	4.0	9.0	3.5	6	12.0

Sözdizimi

HTML'de:

< Kendin dene "

JavaScript:

object .ondrop=function(){ Kendin dene "

JavaScript olarak, kullanılarak addEventListener() metodu:

object .addEventListener("drop", myScript );

Kendin dene "

Not: addEventListener() metodu Internet Explorer 8 ve önceki sürümlerinde desteklenmez.

Teknik detaylar

Kabarcıklar:	Evet
iptal Edilebilir:	Evet
Etkinlik tipi:	DragEvent
Desteklenen HTML etiketleri:	Tüm HTML öğeleri
DOM Versiyon:	Düzey 3 Olaylar

Diğer Örnekler

Örnek

TÜM olası sürükle ve bırak olayları bir gösteri:

<p draggable="true" id="dragtarget">Drag me!</p>

<div class="droptarget">Drop here!</div>

<script>
/* ----------------- Events fired on the drag target ----------------- */

document.addEventListener("dragstart", function(event) {
    // The dataTransfer.setData() method sets the data type and the value of the dragged data
    event.dataTransfer.setData("Text", event.target.id);

    // Output some text when starting to drag the p element
    document.getElementById("demo").innerHTML = "Started to drag the p element.";

    // Change the opacity of the draggable element
    event.target.style.opacity = "0.4";
});

// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});

// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
    document.getElementById("demo").innerHTML = "Finished dragging the p element.";
    event.target.style.opacity = "1";
});

/* ----------------- Events fired on the drop target ----------------- */

// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});

// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});

// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});

/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
    event.preventDefault();
    if ( event.target.className == "droptarget" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});
</script>

Kendin dene "