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

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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