Introduction détaillée à l'exemple de code glisser-déposer en html5-Tutoriel H5-php.cn

Introduction détaillée à l'exemple de code glisser-déposer en html5

黄舟

Libérer： 2017-03-15 15:42:47

original

1453 Les gens l'ont consulté

1) Créer un projet source

1.1) La valeur de l'attribut draggable :

vrai — — 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 s'agit d'un élément ; peut être glissé ;

1.2) L'événement de l'élément déplacé :

dragstart— — Déclenché lorsque l'élément commence à être déplacé ;

glisser — Déclenché à plusieurs reprises lorsque l'élément est déplacé

glisser fin——Déclenché ; lorsque l'opération de glissement 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 glissé entre dans l'espace d'écran occupé par la zone de libération ; Déclenché lorsqu'il est déplacé dans la zone de libération ;

dragleave - déclenché lorsque l'élément glissé quitte la zone de libération sans être placé

drop - déclenché ; lorsque l'élément glissé est déposé dans la zone de publication

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

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

Propriétés supplémentaires définies par l'objet DragEvent :

dataTransfer - Renvoie l'objet utilisé pour transférer les données vers la zone de publication (DataTransfer) ; 🎜 >

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( ,

clear Data()——Supprimez les données dans le format spécifié ; format;

files - Renvoie la liste des fichiers glissés <🎜; > 3.3) Glisser-déposer des fichiers :

Propriétés définies par l'objet Fichier

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

nom - Obtenir le nom du fichier ;

type - Obtenez le type de fichier, représenté par le type MIME ;

taille - Obtenez la taille du fichier (en octets) ;

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!