Heim > Artikel > Web-Frontend > Detaillierte Einführung in den Beispielcode für Drag & Drop in HTML5

Detaillierte Einführung in den Beispielcode für Drag & Drop in HTML5

黄舟Original: 2017-03-15 15:42:471420Durchsuche

1) Quellprojekt erstellen

1.1) Der Wert des ziehbaren Attributs :

wahr — — Dieses Element kann gezogen werden;

false — Dieses Element kann nicht gezogen werden;

auto — Der Browser kann unabhängig entscheiden, ob ein Element kann gezogen werden;

1.2) Das Ereignis des gezogenen Elements:

Dragstart— – Wird ausgelöst, wenn das Element beginnt zu ziehen;

ziehen – Wird wiederholt ausgelöst, wenn das Element gezogen wird;

ziehen Ende – Wird ausgelöst wenn der Ziehvorgang abgeschlossen ist;

2) Freigabebereich erstellen

2.1) Freigabebereich-Ereignis:

Dragenter – wird ausgelöst, wenn das gezogene Element in den vom Freigabebereich eingenommenen Bildschirmbereich gelangt;

Dragover – wird ausgelöst, wenn das gezogene Element in den vom Freigabebereich eingenommenen Bildschirmbereich gelangt; Wird ausgelöst, wenn es innerhalb des Freigabebereichs verschoben wird.

Dragleave – wird ausgelöst, wenn das gezogene Element den Freigabebereich verlässt, ohne platziert zu werden wenn das gezogene Element im Freigabebereich abgelegt wird;

3) Verwenden Sie das DataTransfer-Objekt

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            #src > * {float:left;}
            #src > img {border: thin solid black; padding: 2px; margin:4px;}
            #target {border: thin solid black; margin:4px;}
            #target { height: 81px; width: 81px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
            img.dragged {background-color: lightgrey;}
        </style>
    </head>
    <body>
        <p id="src">
            <img draggable="true" id="banana" src="banana100.png" alt="banana"/>
            <img draggable="true" id="apple" src="apple100.png" alt="apple"/>
            <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
            <p id="target">
                <p id="msg">Drop Here</p>
            </p>            
        </p>            
    
        <script>
            var src = document.getElementById("src");
            var target = document.getElementById("target");
            var msg = document.getElementById("msg");
          
            var draggedID;
          
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                var newElem = document.getElementById(draggedID).cloneNode(false);
                target.innerHTML = "";
                target.appendChild(newElem);
                e.preventDefault();
            }
          
            src.ondragstart = function(e) {
                draggedID = e.target.id;
                e.target.classList.add("dragged");
            }
            
            src.ondragend = function(e) {
                var elems = document.querySelectorAll(".dragged");
                for (var i = 0; i < elems.length; i++) {
                    elems[i].classList.remove("dragged");
                }
            }          
        </script>
    </body>
</html>

3.1) Das Objekt, das gleichzeitig mit dem durch den Drag-and-Drop-Vorgang ausgelösten Ereignis ausgelöst wird, ist DragEvent, das von MouseEvent abgeleitet ist.

Zusätzliche Eigenschaften, die durch das DragEvent-Objekt definiert werden:

dataTransfer – Gibt das Objekt zurück, das zum Übertragen von Daten in den Freigabebereich verwendet wird (DataTransfer); 🎜 >

3.2)Durch das DataTransfer-Objekt definierte Eigenschaften:

Typen – das Format der zurückgegebenen Daten;

getData(0313a12b65aa20a048ec62b8cf470fd2) – Gibt Daten im angegebenen Format zurück

setData(0313a12b65aa20a048ec62b8cf470fd2) ,

clearData(0313a12b65aa20a048ec62b8cf470fd2) – Entfernen Sie die Daten im angegebenen Format format;

Dateis – Gibt die Liste der gezogenen Dateien zurück

3.3) Dateien per Drag-and-Drop verschieben:

Durch das Dateiobjekt definierte Eigenschaften

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            #src > * {float:left;}
            #src > img {border: thin solid black; padding: 2px; margin:4px;}
            #target {border: thin solid black; margin:4px;}
            #target { height: 81px; width: 81px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
            img.dragged {background-color: lightgrey;}
        </style>
    </head>
    <body>
        <p id="src">
            <img draggable="true" id="banana" src="banana100.png" alt="banana"/>
            <img draggable="true" id="apple" src="apple100.png" alt="apple"/>
            <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
            <p id="target">
                <p id="msg">Drop Here</p>
            </p>            
        </p>            
    
        <script>
            var src = document.getElementById("src");
            var target = document.getElementById("target");
                    
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                var droppedID = e.dataTransfer.getData("Text");               
                var newElem = document.getElementById(droppedID).cloneNode(false);
                target.innerHTML = "";
                target.appendChild(newElem);
                e.preventDefault();
            }
          
            src.ondragstart = function(e) {
                e.dataTransfer.setData("Text", e.target.id);
                e.target.classList.add("dragged");
            }
            
            src.ondragend = function(e) {
                var elems = document.querySelectorAll(".dragged");
                for (var i = 0; i < elems.length; i++) {
                    elems[i].classList.remove("dragged");
                }
            }          
        </script>
    </body>
</html>

Name – Rufen Sie den Dateinamen ab;

Typ – Ruft den Dateityp ab, dargestellt durch MIME-Typ;

Größe – Ruft die Dateigröße ab (in Bytes);

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den Beispielcode für Drag & Drop in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5-Beispielcode zum Öffnen einer lokalen App-AnwendungNächster Artikel：HTML5-Beispielcode zum Öffnen einer lokalen App-Anwendung

In Verbindung stehende Artikel

Mehr sehen