HTML5-Drag-and-Drop-Lernen und vollständiger Beispielcode-H5-Tutorial-php.cn

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

PHPz

Freigeben： 2017-04-23 11:55:06

Original

1412 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

setData(,

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

Nach dem Login kopieren

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!