Maison >interface Web >Tutoriel H5 >HTML5 implémente comment glisser et déposer des images entre deux éléments div

HTML5 implémente comment glisser et déposer des images entre deux éléments div

高洛峰original: 2017-03-12 16:42:301624parcourir

Appelez preventDefault() pour éviter le traitement par défaut des données par le navigateur (le comportement par défaut de l'événement drop est de l'ouvrir sous forme de lien) via dataTransfer. La méthode getData(Text) obtient les données déplacées. Les amis intéressés peuvent se référer à l'effet original

L'effet. après avoir glissé

HTML5 implémente comment glisser et déposer des images entre deux éléments div

Le code est le suivant

Le code est le suivant :

[code]
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#p1, #p2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
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>
<img  src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" / alt="HTML5 implémente comment glisser et déposer des images entre deux éléments div" >
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">
 </p>
<p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
</body>
</html>

[/code]

Cela peut paraître un peu compliqué, mais nous pouvons étudier les différentes parties de l'événement glisser-déposer séparément.

Définissez l'élément comme déplaçable

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

déplaçable sur true :

Le code est le suivant :

<img  draggable="true" / alt="HTML5 implémente comment glisser et déposer des images entre deux éléments div" >

Que glisser - ondragstart et setData()

Ensuite, il est précisé que lorsque l'élément est traîné, que se passe-t-il Quoi.

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 glissées :

Le code est le suivant :

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

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

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 à l'intérieur 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 :

Le code est le suivant :

event.preventDefault()

Drop - ondrop

Lorsque les données glissées sont déposées, l'événement de dépôt se produit.

Dans l'exemple ci-dessus, l'attribut ondrop appelle une fonction, drop(

event) :

Le code est le suivant :

function drop(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
}

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") Méthode 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"). Ajoutez l'élément déplacé à l'élément placé (élément cible)

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 de la page d'inscription HTML5Article suivant：Exemple de code de la page d'inscription HTML5

Articles Liés

Voir plus