recherche

Maison >interface Web >Tutoriel H5 >Exemples de glisser-déposer HTML5 (glisser-déposer) expliqués

Exemples de glisser-déposer HTML5 (glisser-déposer) expliqués

零下一度
零下一度original
2017-05-15 10:45:231554parcourir

Le glisser-déposer fait partie du standard HTML5.

Glisser-déposer

Le glisser-déposer est une fonctionnalité courante qui vous permet de saisir un objet et de le faire glisser vers un autre emplacement plus tard.

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

Prise en charge des navigateurs

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 de glisser-déposer HTML5

L'exemple suivant est un simple exemple de glisser-déposer : 

<!DOCTYPE HTML>
<html>
<head>
<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>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>

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 draggable sur true : 

<img draggable="true">

Que faire glisser - ondragstart et setData ()

Ensuite, précisez ce qui se passe lorsque l'élément est déplacé.

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);
}

[Recommandations associées]

1. Recommandation spéciale : Téléchargement de la version V0.1 de "php Programmer Toolbox"

2.

Tutoriel vidéo en ligne h5 gratuit

3.

Tutoriel vidéo html5 original php.cn

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：Tutoriel SVG en ligne HTML5 et différences par rapport à CanvasArticle suivant：Tutoriel SVG en ligne HTML5 et différences par rapport à Canvas

Articles Liés

Voir plus