Maison > Article > interface Web > Introduction détaillée à l'exemple de code glisser-déposer en html5

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

黄舟original: 2017-03-15 15:42:471475parcourir

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>

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(0313a12b65aa20a048ec62b8cf470fd2)——Renvoie les données dans le format spécifié

setData(0313a12b65aa20a048ec62b8cf470fd2 ,

clear Data(0313a12b65aa20a048ec62b8cf470fd2)——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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de code HTML5 pour ouvrir une application localeArticle suivant：Exemple de code HTML5 pour ouvrir une application locale

Articles Liés

Voir plus