Maison >interface Web >tutoriel HTML >Tutoriel HTML5 - Glisser-Déposer
Tutoriel HTML5 - Glisser-Déposer
- 黄舟original
- 2016-12-27 15:24:081647parcourir
Salut les programmeurs front-end ! Je suis très heureux de vous expliquer une série de connaissances sur les didacticiels HTML5. Cet article présente principalement les événements de glisser-déposer HTML5. Le glisser-déposer est une fonctionnalité courante de HTML5.
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 12, Chrome et Safari 5 prennent en charge le glisser-déposer.
Remarque : le glisser-déposer n'est pas pris en charge dans Safari 5.1.2.
Exemple de glisser-déposer HTML5
L'exemple suivant est un simple exemple de glisser-déposer :
Le code est le suivant :
<!DOCTYPE HTML>
<html>
<head>
<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>
<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>Il peut sembler un peu complexe, mais nous pouvons étudier 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);
}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").
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()
pour le placement – ondrop
Lorsque les données glissées sont placées , l'événement drop 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));
}Explication du code :
Appelez PreventDefault() pour éviter le navigateur par défaut gestion des données (le comportement par défaut pour les événements de dépôt est de s'ouvrir sous forme de lien).
Récupérez les données déplacé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″).
Ajouter l'élément glissé à l'élément placé (élément cible).
Ce qui précède est le contenu du tutoriel HTML5-glisser-déposer. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !