Detaillierte Einführung in den Beispielcode für Drag & Drop in HTML5-H5-Tutorial-php.cn

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

黄舟

Freigeben： 2017-03-15 15:42:47

Original

1481 Leute haben es durchsucht

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>

Nach dem Login kopieren

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() – Gibt Daten im angegebenen Format zurück

setData() ,

clearData() – 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>

Nach dem Login kopieren

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!