Code d'implémentation de la fonction glisser-déposer HTML5-Tutoriel H5-php.cn

Code d'implémentation de la fonction glisser-déposer HTML5

黄舟

Libérer： 2017-02-20 13:35:33

original

1447 Les gens l'ont consulté

En HTML5, le glisser-déposer fait partie de la norme, et n'importe quel élément peut être glissé-déposé. Le contenu spécifique est le suivant
1 Glisser-déposer

.

<!DOCTYPE HTML>  

    <html>  

    <head>  

    <style type="text/css">  

    #p1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}   

    </style>  

    <script>  

    function allowDrop(ev)   

    {   

    ev.preventDefault();   

    }   

    function drag(ev)   

    {   

    ev.dataTransfer.setData("Text",ev.target.id);   

    }   

    function drop(ev)   

    {   

    ev.preventDefault();   

    var data=ev.dataTransfer.getData("Text");   

    ev.target.appendChild(document.getElementById(data));   

    }   

    </script>  

    </head>  

    <body>  

    <p>拖动 W3CSchool.cc 图片到矩形框中:</p>  

    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  

    <br>  

    <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">  

    </body>  

    </html>

Copier après la connexion

2. Définissez l'élément pour qu'il soit déplaçable

Tout d'abord, afin de rendre l'élément déplaçable, définissez l'attribut draggable sur true:

3. Que faire glisser - ondragstart et setData()

Ensuite, spécifiez ce qui se passera lorsque l'élément est traîné. Dans l'exemple ci-dessus, l'attribut ondragstart appelle une fonction, drag(event), qui spécifie les données à glisser. La méthode dataTransfer.setData() définit le type de données et la valeur des données déplacées :

function drag(ev)   

    {   

       ev.dataTransfer.setData("Text",ev.target.id);   

    }

Copier après la connexion

Dans cet exemple, le type de données est "Texte" et la valeur est l'identifiant de l'élément déplaçable ("drag1").

4. Où placer - ondragover

L'événement ondragover spécifie où placer les données glissées. Par défaut, les données/éléments ne peuvent pas être placés dans d'autres éléments. Si nous devons autoriser le placement, nous devons empêcher la gestion par défaut de l'élément. Cela se fait en appelant la méthode event.preventDefault() de l'événement ondragover : event.preventDefault()

5. > quand Lorsque les données glissées sont placées, l'événement de dépôt se produit. Dans l'exemple ci-dessus, l'attribut ondrop appelle une fonction, drop(event) :

function drop(ev)   

    {   

    ev.preventDefault();   

    var data=ev.dataTransfer.getData("Text");   

    ev.target.appendChild(document.getElementById(data));   

    }

Copier après la connexion

Explication du code :

Appelez PreventDefault() pour éviter le traitement des données par défaut du navigateur (le comportement par défaut de l'événement drop est de s'ouvrir sous forme de lien). Obtenez les données glissées via la méthode dataTransfer.getData("Text"). Cette méthode renverra n'importe quel ensemble de données du même type dans la méthode setData(). Les données déplacées sont l'identifiant de l'élément déplacé ("drag1"). Ajoutez l'élément glissé à l'élément déposé (élément cible).

Ce qui précède est le contenu du code d'implémentation de la fonction glisser-déposer HTML5. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

-->