Guide HTML5 (3) - Implémentation de la fonction glisser-déposer-Tutoriel H5-php.cn

　Le contenu de cet article explique comment implémenter la fonction glisser-déposer élément HTML dans html5. Avant html5, pour implémenter le glisser-déposer, il fallait utiliser js. Désormais, html5 prend en charge la fonction glisser-déposer en interne, mais pour implémenter des fonctions un peu plus complexes, l'aide de js est toujours indispensable. Regardons quelques exemples ci-dessous.

　1. Créez un objet glisser

Nous pouvons indiquer au navigateur quels éléments doivent être glissés et déposés via l'attribut draggable. draggable a trois valeurs : true : l'élément peut être déplacé ; false : l'élément ne peut pas être déplacé ; auto : le navigateur détermine si l'élément peut être déplacé.

La valeur par défaut du système est auto, mais dans le cas automatique, les navigateurs prennent en charge différemment la fonction glisser-déposer de différents éléments. Par exemple, l'objet img est pris en charge mais l'objet p n'est pas pris en charge. Par conséquent, si vous devez faire glisser un élément, il est préférable de définir draggale sur true. Regardons un exemple ci-dessous :

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <style>
        #src > *        {
            float: left;
        }
        #target, #src > img        {
            border: thin solid black;
            padding: 2px;
            margin: 4px;
        }
        #target        {
            height: 123px;
            width: 220px;
            text-align: center;
            display: table;
        }
        #target > p        {
            display: table-cell;
            vertical-align: middle;
        }
        #target > img        {
            margin: 1px;
        }
    </style></head><body>
    <p id="src">
        <img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
        <img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
        <img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
        <p id="target">
            <p id="msg">
                drop here</p>
        </p>
    </p>
    <script>
        var src = document.getElementById("src");        
        var target = document.getElementById("target");    
        </script>
        </body>
        </html>

Copier après la connexion

Effet de course :

　2. Événements

Découvrons maintenant les événements liés au glisser-déposer. Il existe deux types d'événements, l'un est l'événement de l'objet glisser et l'autre est l'événement de la zone de dépôt. Les événements de glisser incluent : dragstart : déclenché lorsque le glisser de l'élément commence ; drag : déclenché pendant le processus de glissement de l'élément ; dragend : déclenché lorsque le glissement de l'élément se termine. Regardons un exemple ci-dessous :

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <style>
        #src > *        {
            float: left;
        }
        #target, #src > img        {
            border: thin solid black;
            padding: 2px;
            margin: 4px;
        }
        #target        {
            height: 123px;
            width: 220px;
            text-align: center;
            display: table;
        }
        #target > p        {
            display: table-cell;
            vertical-align: middle;
        }
        #target > img        {
            margin: 1px;
        }
        img.dragged        {
            background-color: Orange;
        }
    </style></head><body>
    <p id="src">
        <img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
        <img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
        <img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
        <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");
        src.ondragstart = function (e) {
            e.target.classList.add("dragged");
        }
        src.ondragend = function (e) {
            e.target.classList.remove("dragged");
            msg.innerHTML = "drop here";
        }
        src.ondrag = function (e) {
            msg.innerHTML = e.target.id;
        }    </script></body></html>

Copier après la connexion

Effet de l'opération :

3. Créer une zone de livraison

Regardons les événements liés à la zone de dépôt : dragenter : déclenché lorsque l'objet déplacé entre dans la zone de dépôt ; dragover : déclenché lorsque l'objet déplacé se déplace dans la zone de dépôt ; dragleave : l'objet déplacé n'est pas placé dans la zone de dépôt ; , mais quitte la zone de dépôt Déclenché lorsque ; drop : déclenché lorsque l'objet glissé est déposé dans la zone de dépôt.

Regardons un exemple :

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <style>
        #src > *        {
            float: left;
        }
        #target, #src > img        {
            border: thin solid black;
            padding: 2px;
            margin: 4px;
        }
        #target        {
            height: 123px;
            width: 220px;
            text-align: center;
            display: table;
        }
        #target > p        {
            display: table-cell;
            vertical-align: middle;
        }
        #target > img        {
            margin: 1px;
        }
        img.dragged        {
            background-color: lightgrey;
        }
    </style></head><body>
    <p id="src">
        <img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
        <img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
        <img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
        <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

Résultats en cours d'exécution :

4. Utiliser DataTransfer

Nous utilisons DataTransfer pour transférer les données de l'objet glisser vers la zone de dépôt. DataTransfer a les propriétés et méthodes suivantes : types : renvoie le format des données ; getData() : renvoie les données au format spécifié ; setData(, ) : définit les données dans le format spécifié ; clearData(< format>) : supprime les données de format spécifiées : renvoie un tableau de fichiers qui ont été livrés.

Regardons l'exemple suivant, qui obtient le même effet que l'exemple 3 :

<!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: 123px;
            width: 220px;
            text-align: center;
            display: table;
        }
        #target > p        {
            display: table-cell;
            vertical-align: middle;
        }
        img.dragged        {
            background-color: Orange;
        }
    </style></head><body>
    <p id="src">
        <img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
        <img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
        <img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
        <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

5. Glissez-déposez des fichiers

HTML5. Le support File API nous permet d'exploiter des fichiers locaux. Généralement, nous n'utilisons pas l'API de fichier directement. Nous pouvons l'utiliser en combinaison avec d'autres fonctionnalités, telles que des effets de glisser-déposer, comme dans l'exemple suivant :

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <style>
        body > *        {
            float: left;
        }
        #target        {
            border: medium double black;
            margin: 4px;
            height: 75px;
            width: 200px;
            text-align: center;
            display: table;
        }
        #target > p        {
            display: table-cell;
            vertical-align: middle;
        }
        table        {
            margin: 4px;
            border-collapse: collapse;
        }
        th, td        {
            padding: 4px;
        }
    </style></head><body>
    <p id="target">
        <p id="msg">
            Drop Files Here</p>
    </p>
    <table id="data" border="1">
    </table>
    <script>
        var target = document.getElementById("target");
        target.ondragenter = handleDrag;
        target.ondragover = handleDrag;        
        function handleDrag(e) {
            e.preventDefault();
        }

        target.ondrop = function (e) {            
        var files = e.dataTransfer.files;            
        var tableElem = document.getElementById("data");
            tableElem.innerHTML = "<tr><th>Name</th><th>Type</th><th>Size</th></tr>";            
            for (var i = 0; i < files.length; i++) {                
            var row = "<tr><td>" + files[i].name + "</td>
            <td>" + files[i].type + "</td>
            <td>" + files[i].size + "</td></tr>";
                tableElem.innerHTML += row;
            }
            e.preventDefault();
        }    </script></body></html>

Copier après la connexion

DataTransfer renvoie un objet FileList. peut le traiter comme un objet de tableau de fichiers. file contient les attributs suivants : nom : nom du fichier ; type : type de fichier (type MIME : taille du fichier) ;

Effet de course :

6. 🎜> Voici un exemple de téléchargement de fichiers en faisant glisser ajax.

Effet :

<!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="/UploadHandler.ashx">
    <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 type="text/javascript">
        var target = document.getElementById("target");        
        var httpRequest;        
        var fileList;

        target.ondragenter = handleDrag;
        target.ondragover = handleDrag;        
        function handleDrag(e) {
            e.preventDefault();
        }
        target.ondrop = function (e) {
            fileList = e.dataTransfer.files;
            e.preventDefault();
        }

        document.getElementById("submit").onclick = function handleButtonPress(e) {
            e.preventDefault();            
            var form = document.getElementById("fruitform");            
            var formData = new FormData(form);            
            if (fileList) {                
            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

Certains des exemples ci-dessus peuvent avoir des effets d'exécution différents dans différents navigateurs. J'utilise le navigateur Chrome, à l'exception de l'exemple 5. et 6 ne prend pas en charge plusieurs fichiers, d'autres exemples s'exécutent normalement. Vous pouvez télécharger la démo.

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!