Raid sur l'extension 4 de l'API Javascript HTML5 – Présentation du glisser/déposer_html5 Conseils du didacticiel

Le glisser/déposer est une fonction très courante. Vous pouvez saisir un objet et le faire glisser vers la zone où vous souhaitez le placer. De nombreux javascripts implémentent des fonctions similaires, par exemple le composant glisser-déposer de jQueryUI. En HTML5, le glisser-déposer est devenu une opération standard et est pris en charge par n'importe quel élément. Cette fonctionnalité étant si courante, tous les principaux navigateurs prennent en charge cette opération.
Activer l'attribut drag-draggable
C'est très simple. Il vous suffit de changer l'attribut drag d'un élément en draggable. Cet élément prendra en charge le glisser, comme indiqué ci-dessous :

Copier le code

Le code est le suivant :

Transfert de données pendant le glisser
Pendant le processus de glisser, nous devons souvent transférer les données logiques correspondantes pour terminer le processus de conversion. Ici, nous utilisons principalement l'objet dataTransfer. pour le transfert de données. , jetons un œil à ses membres :
Méthode membres :

Copier le code

Le le code est le suivant :

setData(format,data) : attribuez les données glissées à l'objet dataTransfer.

format : un paramètre String qui spécifie le type de données déplacées. La valeur de ce paramètre peut être « Texte » (type de texte) et « URL » (type d'URL). Ce paramètre est indépendant de la casse, donc transmettre "texte" et "Texte" sont identiques.
data : Un paramètre de type variant qui spécifie les données déplacées. Les données peuvent être du texte, des chemins d'images, des URL, etc.
Cette fonction a une valeur de retour booléenne, true signifie que les données ont été ajoutées avec succès à dataTransfer, false signifie un échec. Si nécessaire, vous pouvez utiliser ce paramètre pour décider si certaines logiques doivent continuer à être exécutées.

Copier le code

Le code est le suivant :

getData(format) : Get les données stockées dans les données de glisser dataTransfer.

La signification du format est la même que celle de setData, et la valeur peut être "Texte" (type de texte) et "URL" (type d'URL).

Copier le code

Le code est le suivant :

clearData(format) : supprimer les données de type spécifiées.

En plus du "Texte" (type de texte) et de l'"URL" (type d'URL) qui peuvent être précisés ci-dessus, le format ici peut également prendre les valeurs suivantes : fichier-fichier, html- élément html, image -image.
Cette méthode peut être utilisée pour traiter sélectivement le type de données déplacé.
Membres d'attribut :

Copier le code

Le code est le suivant :

effectAllowed : définit ou obtient les opérations qui peuvent être effectuées par les données dans l'élément de source de données.

Le type d'attribut est une chaîne et la plage de valeurs est la suivante :
"copier" - copier les données
"lien" - données de lien
"déplacer" -. déplacer les données
"copyLink" - Copier ou lier des données, déterminées par l'objet cible.
"copyMove" - ​​Copiez ou déplacez des données, déterminées par l'objet cible.
"linkMove" - ​​​​​​Liez ou déplacez des données, comme déterminé par l'objet cible.
"toutes" - Toutes les opérations sont prises en charge.
"aucun"-Désactiver le glisser.
"non initialisé" -Valeur par défaut, adopte le comportement par défaut.
Notez qu'après avoir défini effectAllowed sur none, le glisser est interdit, mais la forme de la souris affiche toujours la forme d'un objet non déplaçable. Si vous ne souhaitez pas afficher cette forme de souris, vous devez définir l'attribut returnValue de l'événement d'événement de fenêtre. à faux.

Copier le code

Le code est le suivant :

dropEffect : définir ou obtenir le glisser la cible Opérations autorisées sur les formes de souris associées.

Le type d'attribut est une chaîne et la plage de valeurs est la suivante :
"copie" - la souris est affichée sous forme de forme lorsqu'elle est copiée
"lien" - la souris est ; affiché comme forme connectée ;
"move" - La souris apparaît comme une forme en mouvement.
"aucun" (par défaut) - La souris apparaît comme une forme sans glisser.
effectAllowed spécifie les opérations prises en charge par la source de données, elle est donc généralement spécifiée dans l'événement ondragstart. dropEffect spécifie les opérations prises en charge par la cible de glisser-déposer, donc en conjonction avec effectAllowed, il est généralement utilisé dans les événements ondragover, ondragover et ondrop sur la cible de glisser.

Copier le code

Le code est le suivant :

fichiers : Renvoie la liste des fichiers déplacés FileList.
Types : Liste des types de données (données glissées) envoyées dans ondragstart.

L'existence de l'objet dataTransfer permet de transférer des données logiques entre la source de données glissée et l'élément cible. Habituellement, nous utilisons la méthode setData pour fournir des données dans l'événement ondragstart de l'élément source de données, puis utilisons la méthode getData pour obtenir les données dans l'élément cible.
Événements déclenchés lors d'un glissement
Voici les événements qui se produiront lors d'un glissement. Fondamentalement, la séquence d'événements déclencheurs est la séquence suivante :

<. 🎜>

Copier le codeLe code est le suivant :

dragstart : Déclenché lorsque l'élément à glisser commence à être glissé cet événement. L'objet est un glisser-déposer d'éléments.
drag : Déclenché lorsqu'un élément est déplacé. Cet objet événement est l'élément déplacé.
dragenter : Déclenché lorsqu'un élément de glissement entre dans l'élément cible. Cet objet événement est l'élément cible.
dragover : Déclenché lorsqu'un élément est glissé et déplacé sur l'élément cible. Cet objet événement est l'élément cible.
dragleave : Déclenché lorsqu'un élément est éloigné de l'élément cible. Cet objet événement est l'élément cible.
drop : Déclenché lorsque l'élément glissé est placé dans l'élément cible. Cet objet événement est l'élément cible.
dragend : Déclenché après le dépôt, c'est-à-dire déclenché lorsque le glisser est terminé. Cet objet événement est l'élément glissé.

Fondamentalement, les paramètres de l'événement seront transmis dans les éléments pertinents, qui peuvent être facilement modifiés. Ici, nous n'avons pas besoin de gérer tous les événements, nous devons généralement uniquement relier les événements principaux.

Événement Drag start-ondragstart Les paramètres transmis par cet événement contiennent des informations très riches, à partir desquelles l'élément déplacé (event.Target) peut être facilement obtenu. Vous pouvez définir les données déplacées ; (event.dataTransfer.setData); afin que vous puissiez facilement implémenter la logique derrière le glisser (bien sûr, vous pouvez également transmettre d'autres paramètres lors de la liaison).

Pendant le processus de déplacement - événements ondrag, ondragover, ondragenter et ondragleave
L'objet de l'événement ondrag est l'élément glissé, et généralement cet événement est géré moins fréquemment. L'événement ondragenter se produit lorsque le glisser entre dans l'élément actuel, l'événement ondragleave se produit lorsque le glisser quitte l'élément actuel et l'événement ondragover se produit lorsque le glisser se déplace dans l'élément actuel. Vous ne devez faire attention qu'à une chose ici, car par défaut, le navigateur interdit la suppression d'éléments, donc pour permettre la suppression d'éléments, vous devez renvoyer false dans cette fonction ou appeler event.preventDefault () méthode. Comme le montre l'exemple ci-dessous.

Faites glisser la fin du dépôt, événement ondragend Lorsque les données déplaçables sont déposées, l'événement de dépôt est déclenché. Une fois le dépôt terminé, l'événement dragend est déclenché et cet événement est relativement rarement utilisé.
Regardez un exemple simple :

Copiez le code Le code est le suivant :

prévenirDefault();
}
functiondrag(ev){
ev.dataTransfer.setData("Text",ev.target.id
}
functiondrop(ev){ vardata=ev .dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault(); script>


<
< ;imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"width="336"height="69"/> ;



Déplacement de fichiers
L'exemple ci-dessus a utilisé diverses méthodes et attributs de dataTransfer. Regardons une autre application intéressante sur Internet : faites glisser et déposez une image sur la page Web, puis affichée sur. la page Internet. Cette application utilise l'attribut files de dataTransfer.

Copier le code

Le code est le suivant :

🎜>



#section{font-family:"Georgia","Microsoft Yahei","中文中宋";}
.container{display:inline-block;min-height:200px;min-width:360px; couleur : #f30;padding:30px;border:3pxsolid#ddd;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.preview{max-width : 360px; }
#files-list{position:absolute;top:0;left:500px;}
#list{width:460px;}
#list.preview{max-width:250px;}
#listp{color:#888;font-size:12px;}
#list.green{color:#09c;}
>

Faites glisser votre image dans le conteneur ci-dessous :

conteneur">

Les fichiers qui ont été glissés dedans :

< ; ulid="list">

= document.getElementById('list'),
cnt=document.getElementById('container');
//Déterminer s'il s'agit d'une image
functionisImage(type){
switch(type) {
case'image/jpeg' :
case'image/png' :
case'image/gif' :
case'image/bmp' :
case'image/jpg' :
returntrue;
default:
returnfalse;
}
}
//Gérer la liste des fichiers par glisser-déposer
functionhandleFileSelect(evt){
evt.stopPropagation ();
evt.preventDefault();
varfiles=evt.dataTransfer.files;
for(vari=0,f;f=files[i];i ){
vart=f .type?f.type :'n/a',
reader=newFileReader(),
looks=function(f,img){
list.innerHTML ='

' f.name '(' t
')-' f.size 'bytes

' img '

'
cnt.innerHTML= img;
} ,
isImg=isImage(t),
img;
//L'image traitée
if(isImg){
reader.onload=(function(theFile) {
returnfunction (e){
img=''
look(theFile,img );
};
})(f)
reader.readAsDataURL(f);
}else{
img='"o((>ω< ))o", Ce que vous avez envoyé n'est pas une photo ! ! ';
looks(f,img);
}
}
}
//Gérer l'effet d'insertion et de déplacement
functionhandleDragEnter(evt){this.setAttribute('style' , 'border-style:dashed;');}
functionhandleDragLeave(evt){this.setAttribute('style','');}
//Gérer les événements de glisser-déposer de fichiers pour empêcher les événements par défaut du navigateur de provoquant la redirection de
functionhandleDragOver(evt){
evt.stopPropagation();
evt.preventDefault();
cnt.addEventListener('dragenter',handleDragEnter,false); 🎜>cnt.addEventListener('dragover',handleDragOver,false);
cnt.addEventListener('drop',handleFileSelect,false);
cnt.addEventListener('dragleave',handleDragLeave,false); }else{
document.getElementById('section').innerHTML='Votre navigateur ne le prend pas en charge, camarade de classe'
>


Cet exemple utilise l'API de lecture de fichiers en html5 : objet FileReader ; cet objet fournit les méthodes asynchrones suivantes pour lire les fichiers :
1.
Lire le fichier en mode binaire, l'attribut result contiendra le format binaire d'un fichier
2.FileReader.readAsText(fileBlob,opt_encoding)
Lire le fichier en mode texte, l'attribut result contiendra le format texte d'un fichier, et le paramètre de décodage par défaut est "utf-8".
3.FileReader.readAsDataURL(file)
Le résultat de la lecture d'un fichier sous forme d'URL contiendra le format DataURL d'un fichier (les images sont généralement utilisées de cette façon).
Lorsque le fichier est lu en utilisant la méthode ci-dessus, les événements suivants seront déclenchés :