Heim > Artikel > Web-Frontend > HTML5-Drag-and-Drop-Lernen und vollständiger Beispielcode

HTML5-Drag-and-Drop-Lernen und vollständiger Beispielcode

PHPzOriginal: 2017-04-23 11:55:061319Durchsuche

In diesem Artikel erfahren Sie, wie Sie HTML5 per Drag-and-Drop verschieben und den Beispielcode vervollständigen. Ich hoffe, dass er für H5-Anfänger hilfreich ist!

1) Erstellen Sie das Quellprojekt

1.1) Der Wert des ziehbaren Attributs:

true - dieses Element kann gezogen werden;

false – dieses Element kann nicht gezogen werden;

auto – der Browser kann selbstständig entscheiden, ob es möglich ist gezogen werden;

1.2) Ereignisse von gezogenen Elementen:

Dragstart – wird ausgelöst, wenn das Element gezogen wird ;

Ziehen – wird wiederholt ausgelöst, wenn das Element gezogen wird.

Dragend – wird ausgelöst, wenn der Ziehvorgang abgeschlossen ist

2) Erstellen Sie einen Freigabebereich

2.1) Release-Bereich-Ereignis:

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

Dragover ——Wird ausgelöst, wenn sich das gezogene Element innerhalb des Freigabebereichs bewegt;

Dragleave——Wird ausgelöst, wenn das gezogene Element den Freigabebereich verlässt, ohne platziert zu werden; Drop – Wird ausgelöst, 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) Gleichzeitig mit dem Ereignis, das durch ausgelöst wird Der Drag-and-Drop-Vorgang Das versendete Objekt ist DragEvent, das von MouseEvent abgeleitet ist.

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

dataTransfer – Gibt ein Objekt zurück, das für die Datenübertragung in den Freigabebereich (DataTransfer) verwendet wird; 🎜 >

3.2)Durch das DataTransfer-Objekt definierte Attribute:

Typen – das Format der zurückgegebenen Daten.

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

setData(0313a12b65aa20a048ec62b8cf470fd2,

clearData(0313a12b65aa20a048ec62b8cf470fd2) – Daten im angegebenen Format entfernen.

Dateien – Gibt die Liste der gezogenen Dateien zurück.

3.3) Drag-and-Drop-Dateien:

<!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>

Durch Datei definierte Eigenschaften Objekt

Name – Rufen Sie den Dateinamen ab.

Typ – Rufen Sie den Dateityp ab. Dargestellt durch MIME-Typ;

Größe – Holen Sie sich die Dateigröße (in Bytes); 🎜>Empfohlene HTML5-Kurse: PHP-Website für ChinesischHTML5-Video-Online-Tutorial

Das obige ist der detaillierte Inhalt vonHTML5-Drag-and-Drop-Lernen und vollständiger Beispielcode. 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：Beispiel-Tutorial für eine HTML5-Canvas-ZeichnungNächster Artikel：Beispiel-Tutorial für eine HTML5-Canvas-Zeichnung

In Verbindung stehende Artikel

Mehr sehen