HTML5 Drag and Drop

Poprzedni: HTML5 inline SVG

Dalej: HTML5 geopositioning

Przeciągnij i upuść (drag and drop) jest częścią standardu HTML5.

W3cschool ikonę i przeciągnij go do prostokąta.

Przeciągnij i upuść

Przeciągnij i upuść jest cechą, która jest pełzać na innym miejscu po obiekcie.

W HTML5, przeciągnij i upuść jest standardową częścią każdego elementu można przeciągać i upuszczać.

Pomoc Browser

Internet Explorer 9+, Firefox, Opera, Chrome i Safari obsługa drag.

Uwaga: Safari 5.1.2 nie obsługuje przeciągania.

HTML5 przeciągnij i upuść Przykłady

Poniższy przykład jest prosty przeciągnij i upuść Przykład:

Przykłady

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>

<p>拖动 W3CSchool.cc 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Spróbuj »

To może wydawać się nieco skomplikowane, ale udało nam się uczyć różnych części przeciągnij i upuść zdarzenia.

Element jest ustawiony do spadku

Po pierwsze, w celu uczynienia element przyciągany, ustawić atrybut Draggable true:

Przeciągnij Co - ondragstart i SetData ()

Wtedy, gdy element jest przeciągany przewidzieć, co się wydarzy.

W powyższym przykładzie, ondragstart atrybutem wywołuje funkcję przeciągnij (zdarzenia), który definiuje dane przeciągane.

dataTransfer.setData () aby ustawić typ danych i wartość holowana dane:

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

W tym przykładzie, typ danych jest "Tekst", wartość jest przeciągany id elementu ( "drag1").

Gdzie umieścić - onDragOver

onDragOver zdarzenie określone gdzie umieścić dane przeciągane.

Domyślnie nie można umieszczać dane / elementy do innych elementów. Jeśli trzeba skonfigurować pozwala na miejsce, musimy uniemożliwić manipulację domyślnego elementu.

Można to zrobić dzwoniąc onDragOver event.preventDefault zdarzeń () Metoda:

event.preventDefault()

Zostać umieszczone - ondrop

Po umieszczeniu przeciągane dane, spadek zdarzenie.

W powyższym przykładzie, ondrop atrybutem wywołuje funkcję, drop (zdarzenia):

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

Kod wyjaśnienie:

Zadzwoń preventDefault () w celu zapobieżenia domyślną przeglądarkę do przetwarzania danych (domyślne zachowanie Drop imprezy jest otwarcie link)
Uzyskaj przeciągane dane przez dataTransfer.getData metody ( "Text"). Metoda ta powraca tym samym zbiorze danych dowolnego typu, w metodzie SetData ().
Dane są holowane holowane id elementu ( "drag1")
Przeciągany elementem dołączane do elementów miejscu (element docelowy) w

Więcej przykładów

Przeciągnij i upuść obraz tam iz powrotem
Jak przeciągać i upuszczać obrazy między dwoma <div> elementów.