Apprentissage par glisser-déposer HTML5 et exemple de code complet-Tutoriel H5-php.cn

Apprentissage par glisser-déposer HTML5 et exemple de code complet

PHPz

Libérer： 2017-04-23 11:55:06

original

1318 Les gens l'ont consulté

Cet article apprend à glisser-déposer du HTML5 et à compléter l'exemple de code. J'espère qu'il sera utile aux débutants H5 !

1) Créer le projet source

1.1) La valeur de l'attribut déplaçable :

true - cet élément peut être déplacé ;

false - cet élément ne peut pas être déplacé

auto - le navigateur peut décider indépendamment s'il le peut ; être glissé ;

1.2) Événements des éléments glissés :

dragstart - déclenché lorsque l'élément commence à être glissé ;

glisser - déclenché à plusieurs reprises lorsque l'élément est déplacé.

Dragend - déclenché lorsque l'opération de glisser est terminée

2) Créer une zone de libération

2.1) Événement de zone de libération :

dragenter - déclenché lorsque l'élément glissé entre dans l'espace d'écran occupé par la zone de libération

Dragover ; ——Déclenché lorsque l'élément déplacé se déplace dans la zone de libération

Dragleave——Déclenché lorsque l'élément déplacé quitte la zone de libération

drop——Déclenché lorsque l'élément glissé est déposé dans la zone de libération.

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

Copier après la connexion

3) Utiliser l'objet DataTransfer

3.1) En même temps que l'événement déclenché par l'opération glisser-déposer L'objet distribué est DragEvent, qui est dérivé de MouseEvent.

Attributs supplémentaires définis par l'objet DragEvent :

dataTransfer - Renvoie un objet (DataTransfer) utilisé pour le transfert de données vers la zone de publication < ; 🎜 >

3.2)Propriétés définies par l'objet DataTransfer :

types - le format des données renvoyées.

getData()——Renvoie les données dans le format spécifié

setData(,

clearData()——Supprime les données dans le format spécifié.

fichiers - Renvoie la liste des fichiers glissés.

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

Copier après la connexion

3.3) Glisser-déposer des fichiers :

Propriétés définies par Fichier objet

nom——Obtenir le nom du fichier.

type——Obtenir le type de fichier. Représenté par le type MIME ;

taille - Obtenez la taille du fichier (en octets)

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            .table {display:table;}
            .row {display:table-row;}
            .cell {display: table-cell; padding: 5px;}
            .label {text-align: right;}
            #target {border: medium double black; margin:4px; height: 50px;
                width: 200px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
        </style>
    </head>
    <body>
        <form id="fruitform" method="post" action="http://titan:8080/form">
            <p class="table">
                <p class="row">
                    <p class="cell label">Bananas:</p>
                    <p class="cell"><input name="bananas" value="2"/></p>
                </p>
                <p class="row">
                    <p class="cell label">Apples:</p>
                    <p class="cell"><input name="apples" value="5"/></p>
                </p>
                <p class="row">
                    <p class="cell label">Cherries:</p>
                    <p class="cell"><input name="cherries" value="20"/></p>
                </p>
                <p class="row">
                    <p class="cell label">File:</p>
                    <p class="cell"><input type="file" name="file"/></p>
                </p>
                <p class="row">
                    <p class="cell label">Total:</p>
                    <p id="results" class="cell">0 items</p>
                </p>                
            </p>
            <p id="target">
                <p id="msg">Drop Files Here</p>
            </p>            
            <button id="submit" type="submit">Submit Form</button>
        </form>
        <script>
            var target = document.getElementById("target");     
            var httpRequest;
            var fileList;
                         
            document.getElementById("submit").onclick = handleButtonPress;                    
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                fileList = e.dataTransfer.files;
                e.preventDefault();
            }          
                         
            function handleButtonPress(e) {
                e.preventDefault();
                 
                var form = document.getElementById("fruitform");
                var formData = new FormData(form);
                 
                if (fileList || true) {
                    for (var i = 0; i < fileList.length; i++) {
                        formData.append("file" + i, fileList[i]);
                    }
                }  
                 
                httpRequest = new XMLHttpRequest();
                httpRequest.onreadystatechange = handleResponse;
                httpRequest.open("POST", form.action);
                httpRequest.send(formData);
            }
                         
            function handleResponse() {
                if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                    var data = JSON.parse(httpRequest.responseText);
                    document.getElementById("results").innerHTML = "You ordered "
                        + data.total + " items";
                }
            }
         </script>
    </body>
</html>

Copier après la connexion

Cours html5 recommandés : site Web php chinois

Tutoriel vidéo en ligne html5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!