Glisser-déposer HTML5 : que signifie le glisser-déposer ? Comment l'utiliser ?-Tutoriel H5-php.cn

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

寻∝梦

Libérer： 2018-08-13 19:11:34

original

2762 Les gens l'ont consulté

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>

Copier après la connexion

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">

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!