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
1933 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 :
"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." />
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>
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
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.
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
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