Maison > interface Web > Tutoriel H5 > le corps du texte

Code d'implémentation de l'effet glisser-déposer HTML5

黄舟
Libérer: 2017-02-21 13:11:20
original
1424 Les gens l'ont consulté

Glisser-déposer


Le glisser-déposer est une fonctionnalité courante qui permet de saisir un objet puis de le glisser vers un autre emplacement.

En HTML5, le glisser-déposer fait partie du standard et n'importe quel élément peut être glissé-déposé.

Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge le glisser-déposer.

Remarque :Safari 5.1.2 ne prend pas en charge le glisser-déposer.

Exemple :

<!DOCTYPE html>  
<html>  
<head>  
    <title>拖放</title>  
    <style type="text/css">  
        #p1{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </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 id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
    <br />  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" />  
</body>  
</html>
Copier après la connexion



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

Ensuite, précisez que lorsque l'élément est déplacé , ce qui se produit.
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 "Text" et la valeur est l'identifiant de l'élément déplaçable ("drag1").

é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()

Lorsque les données glissées sont placées, une chute se produira.
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 l'ouvrir sous forme de lien)
via dataTransfer.getData ("Texte") pour obtenir les données glissées. 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")
Ajouter l'élément déplacé à l'élément de placement (élément cible)

Faites glisser d'avant en arrière :

Si vous souhaitez faire un va-et-vient entre deux endroits, modifiez simplement légèrement le code ci-dessus.
Changez le code dans le corps en :

<body>  
    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" /></p>  
    <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
</body>
Copier après la connexion



Ensuite, ajoutez #p2 au style :

<style type="text/css">  
        #p1,#p2{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </style>
Copier après la connexion



De cette façon, vous pouvez faire glisser et déposer d'avant en arrière .

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal