communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > Guide HTML5-3. Comment implémenter la fonction glisser-déposer des compétences du didacticiel HTML Elements_html5.

Guide HTML5-3. Comment implémenter la fonction glisser-déposer des compétences du didacticiel HTML Elements_html5.

WBOY
Libérer： 2016-05-16 15:50:16
original
1948 Les gens l'ont consulté

Le contenu de cet article explique comment implémenter la fonction glisser-déposer des éléments HTML dans HTML5. Avant html5, pour implémenter le glisser-déposer, il fallait utiliser js. Désormais, html5 prend en charge la fonction glisser-déposer en interne, mais pour implémenter des fonctions un peu plus complexes, l'aide de js est toujours indispensable. Regardons quelques exemples ci-dessous.
1. Créez un objet glisser
Nous pouvons indiquer au navigateur quels éléments doivent implémenter la fonction de glisser via l'attribut draggable. draggable a trois valeurs : true : l'élément peut être déplacé ; false : l'élément ne peut pas être déplacé ; auto : le navigateur détermine si l'élément peut être déplacé.
La valeur par défaut du système est auto, mais dans le cas automatique, les navigateurs prennent en charge différemment la fonction glisser-déposer de différents éléments. Par exemple, les objets img sont pris en charge mais les objets div ne sont pas pris en charge. Par conséquent, si vous devez faire glisser un élément, il est préférable de définir draggale sur true. Regardons un exemple ci-dessous :

Copiez le code
Le code est le suivant :




🎜>{
float : left;
}
#target, #src >
{
bordure : mince noir uni ;
remplissage : 2px ; 4px;
}
#target
{
hauteur : 123px ;
largeur :
alignement du texte : centre ; 🎜>#target > ; p
{
affichage : table-cell ;
alignement vertical : milieu
}
#target >
{
marge : 1px;
}


"true" id= "Guide HTML5-3. Comment implémenter la fonction glisser-déposer des compétences du didacticiel HTML Elements_html5." src="img/1.jpg" alt="Guide HTML5-3. Comment implémenter la fonction glisser-déposer des compétences du didacticiel HTML Elements_html5." />
car2
car3


déposez ici

<script> <br />var src = document.getElementById("src"); <br />var target = document.getElementById("target"); <br /></script> /html>


Effet de l'opération :





2. Gestion des événements de glisser

Apprenons maintenant les événements liés au glisser. Il existe deux types d'événements, l'un est l'événement de l'objet glisser et l'autre est l'événement de l'objet glisser. événement de zone de dépôt. Les événements de glisser incluent : dragstart : déclenché lorsque le glisser de l'élément commence ; drag : déclenché pendant le processus de glissement de l'élément ; dragend : déclenché lorsque le glissement de l'élément se termine. Regardons un exemple ci-dessous :


Copiez le code


Le code est le suivant :


🎜>{ float : gauche ; } #target, #src > {
bordure : mince noir uni ;
remplissage : 2px ; 4px;
}
#target
{
hauteur : 123px ;
largeur :
alignement du texte : centre ; 🎜>#target > p
{
affichage : table-cell ;
alignement vertical : milieu
}
#target >
{
marge : 1px;
}
img.dragged
{
couleur de fond : Orange
}
corps>

Guide HTML5-3. Comment implémenter la fonction glisser-déposer des compétences du didacticiel HTML Elements_html5. >car2
car3


déposez ici




<script> <br />var src = document.getElementById("src"); ); <br />var msg = document.getElementById("msg"); <br />src.ondragstart = function (e) { <br />e.target.classList.add("dragged"); 🎜>src.ondragend = function (e) { <br />e.target.classList.remove("dragged"); <br />msg.innerHTML = "déposer ici" <br />} <br />src.ondrag = function (e) { <br />msg.innerHTML = e.target.id <br />} <br /></script>
🎜>
Effet opérationnel :


3. Créer une zone de dépôt
Regardons les événements liés à la zone de dépôt : dragenter : déclenché lorsque l'objet déplacé entre dans la zone de dépôt ; dragover : déclenché lorsque l'objet déplacé se déplace à l'intérieur ; la zone de dépôt ; dragleave : Déclenché lorsque l'objet déplacé n'est pas placé dans la zone de dépôt et quitte la zone de dépôt ; drop : Déclenché lorsque l'objet déplacé est placé dans la zone de dépôt ;
Regardons un exemple :

Copiez le code
Le code est le suivant :




Exemple *
{
float : gauche ;
}
#target, #src >
{
bordure : fine et noire ; marge : 4px ;
}
#target
{
hauteur : 123px ;
largeur :
alignement du texte : centre ; }
#target > p
{
affichage : table-cell ;
alignement vertical : milieu
}
#target > marge : 1px ;
}
img.dragged
{
couleur de fond : gris clair


Guide HTML5-3. Comment implémenter la fonction glisser-déposer des compétences du didacticiel HTML Elements_html5.
< ;img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
car3

;



<script> <br />var src = document.getElementById("src"); target"); <br />var msg = document.getElementById("msg"); <br />var draggedID; <br />target.ondragenter = handleDrag; <br />target.ondragover = handleDrag; <br />function handleDrag(e ) { <br />e.preventDefault(); <br />} <br />target.ondrop = function (e) { <br />var newElem = document.getElementById(draggedID).cloneNode(false); innerHTML = "" ; <br />target.appendChild(newElem); <br />e.preventDefault(); <br />} <br />src.ondragstart = function (e) { <br />draggedID = e.target.id ; <br /> e.target.classList.add("dragged"); <br />} <br />src.ondragend = function (e) { <br />var elems = document.querySelectorAll(".dragged"); 🎜>for ( var i = 0; i < elems.length; i ) { <br />elems[i].classList.remove("dragged"); <br />} <br />} <br /></ script> <br /> <br /> <br /><br /><br />Exécuter le résultat : <br /> <br /><br /><br /> <br /><br /><br /> <br /><br />4. Utiliser DataTransfer<br /> <br />Nous utilisons DataTransfer pour transférer les données de l'objet glisser vers la zone de dépôt. DataTransfer a les propriétés et méthodes suivantes : types : renvoie le format des données ; getData(<format>) : renvoie les données au format spécifié ; setData(<format>, <data>) : définit les données dans le format spécifié ; clearData(< format>) : supprime les données de format spécifiées : renvoie un tableau de fichiers qui ont été livrés. <br />Regardons l'exemple suivant, qui obtient le même effet que l'exemple 3 : <br /></script>


Copiez le code

Le le code est le suivant :





Exemple

ête>


Guide HTML5-3. Comment implémenter la fonction glisser-déposer des compétences du didacticiel HTML Elements_html5.
car2
car3


déposez ici




<script> <br />var src = document.getElementById("src"); <br />var target = document.getElementById("target"); <br />target.ondragenter = handleDrag; <br />target.ondragover = handleDrag; <br />function handleDrag(e) { <br />e.preventDefault(); <br />} <br />target.ondrop = function (e) { <br />var dropID = e.dataTransfer.getData("Text"); <br />var newElem = document.getElementById(droppedID).cloneNode(false); <br />target.innerHTML = ""; <br />target.appendChild(newElem); <br />e.preventDefault(); <br />} <br />src.ondragstart = function (e) { <br />e.dataTransfer.setData("Text", e.target.id); <br />e.target.classList.add("dragged"); <br />} <br />src.ondragend = function (e) { <br />var elems = document.querySelectorAll(".dragged"); <br />for (var i = 0; i < elems.length; i ) { <br />elems[i].classList.remove("dragged"); <br />} <br />} <br /></script>



5.拖拽文件
html5支持file api，可以让我们操作本地文件。一般我们不直接使用file api ， 我们可以结合其他特性一起使用，比如结合拖拽特效，如下例：

复制代码
代码如下:




Exemple

ête>



Déposez les fichiers ici





<script> <br />var target = document.getElementById("target"); <br />target.ondragenter = handleDrag; <br />target.ondragover = handleDrag; <br />function handleDrag(e) { <br />e.preventDefault(); <br />} <br />target.ondrop = function (e) { <br />var files = e.dataTransfer.files; <br />var tableElem = document.getElementById("data"); <br />tableElem.innerHTML = "<tr><th>Name<th>Type<th>Size"; <br />for (var i = 0; i < files.length; i ) { <br />var row = "<tr><td>" fichiers[i].name "<td>" fichiers[i].tapez "<td>" fichiers[i].size ""; <br />tableElem.innerHTML = row; <br />} <br />e.preventDefault(); <br />} <br /></script>



DataTransfer renvoie un objet FileList, que nous pouvons considérer comme un objet tableau de fichiers. Le fichier contient les attributs suivants : nom : nom du fichier ; type : type de fichier (type MIME : taille du fichier).
Effet opérationnel :


6. Télécharger des fichiers
Ce qui suit est un exemple de téléchargement de fichiers en faisant glisser ajax.

Copier le code
Le code est le suivant :




Exemple

"fruitform" method="post" action="/UploadHandler.ashx">
class=" cell label">
Bananes :


div>




div class= "row">
nom d'entrée = "cerises" value="20" />


label"> ;
Fichier :


> ;


;div id ="résultats" class="cell">
éléments

;


Déposer les fichiers ici


Soumettre le formulaire



Effet :

Certains des exemples ci-dessus peuvent avoir des résultats de fonctionnement différents selon les navigateurs. J'utilise le navigateur Chrome. À l'exception des exemples 5 et 6 qui ne prennent pas en charge plusieurs fichiers, les autres exemples s'exécutent normalement. Vous pouvez télécharger la démo.
Adresse de téléchargement de la démo : Html5Guide.draggable.rar
Étiquettes associées：
élément HTML 拖拽
source：php.cn
Article précédent：Tutoriel de dessin sur toile html5 (4) – Chemins non fermés et méthodes de remplissage en dégradé_Compétences du didacticiel html5 Article suivant：Tutoriel de dessin sur toile html5 (3) : La raison pour laquelle les lignes de 1 pixel sont floues sur les compétences du didacticiel canvas_html5
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Impossible d'obtenir l'élément d'entrée du site Web J'essaie donc d'obtenir un élément d'entrée de Twitter mais lorsque je l'exécute, cela con...
Depuis 2024-04-06 18:59:57
0
1
442
Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...
Depuis 2024-04-06 17:40:41
0
2
410
Élément enfant React non valide (trouvé : objet avec la clé {clientVersion}). Si vous souhaitez afficher une collection d'éléments enfants, utilisez plutôt un tableau J'ai un formulaire en plusieurs étapes et lorsque j'essaie de le soumettre, cette erreur s...
Depuis 2024-04-06 16:25:39
0
1
346
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal