Maison > Article > interface Web > Glisser-déposer HTML5 : que signifie le glisser-déposer ? Comment l'utiliser ?

Glisser-déposer HTML5 : que signifie le glisser-déposer ? Comment l'utiliser ?

寻∝梦original: 2018-08-13 19:11:342795parcourir

HTML5 est si populaire maintenant, découvrons ces nouveaux éléments. Cet article vous apprend principalement ce que sont les éléments glisser-déposer de HTML5 et comment les utiliser.

Que signifie le glisser-déposer en HTML5 ?

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. , le but du glisser-déposer est de vous permettre de placer un objet là où vous souhaitez le placer. En HTML5, le glisser-déposer fait partie de la norme et n'importe quel élément peut être glissé-déposé.

Que signifie le glisser-déposer ?

darg : Le corps de l'événement est l'élément déplacé et est déclenché lorsque l'élément déplacé est déplacé.

drop : Le corps de l'événement est l'élément cible et est déclenché lorsque l'élément cible accepte pleinement l'élément glissé-déposé.

Prise en charge des navigateurs

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9+, Firefox, Opera, Chrome et Safari prennent en charge le glissement.

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

Exemple d'utilisation du glisser-déposer HTML5

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

Voici un exemple :

<!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 différentes parties de l'événement glisser-déposer séparément.

Étapes détaillées pour l'exécution d'un événement par glisser-déposer :

1 Définissez l'élément pour qu'il puisse être déplacé

Tout d'abord, dans. pour que l'élément soit 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 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);       
}

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

Astuce : Vous pouvez apprendre plus d'informations utiles dans la section "événement ondragstart" de ce site !

2. 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 :

event.preventDefault()

3. >

Lorsque les données déplacé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));        
}

Explication du code :

Appelez PreventDefault() pour éviter le navigateur par défaut traitement des données (le comportement par défaut de l'événement drop est d'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"), et l'élément déplacé est ajouté à l'élément placé (élément cible).

[Recommandations associées]

Éléments de base du HTML, vous permettant d'apprendre le HTML à partir de zéro

Le développement du HTML et Historique HTML5

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!

html5 firefox chrome safari html 数据类型 Event 对象事件

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：Quels sont les nouveaux éléments de formulaire couramment utilisés en HTML5 ? Exemples d'utilisation ci-jointsArticle suivant：Quels sont les nouveaux éléments de formulaire couramment utilisés en HTML5 ? Exemples d'utilisation ci-joints

Articles Liés

Voir plus