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

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

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>

>

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

< ;img draggable="true" id="car2" src="img/2.jpg" alt="car2" />

;

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

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 :

"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