Tutoriel HTML5 - Glisser-Déposer-tutoriel HTML-php.cn

Tutoriel HTML5 - Glisser-Déposer

黄舟

Libérer： 2016-12-27 15:24:08

original

1646 Les gens l'ont consulté

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>

Copier après la connexion

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” />

Copier après la connexion

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

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

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()

Copier après la connexion

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

Copier après la connexion

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) !