Exemples de glisser-déposer HTML5 (glisser-déposer) expliqués-Tutoriel H5-php.cn

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

零下一度

Libérer： 2017-05-15 10:45:23

original

1517 Les gens l'ont consulté

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>

Copier après la connexion

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

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

[Recommandations associées]

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

Tutoriel vidéo en ligne h5 gratuit

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!