Interface avec le navigateur
Modules intégrés propres à Brython
Travailler avec Brython
Recettes
|
Evénements glisser-déposer
Les événements associés aux opérations de glisser-déposer sont
| drag |
Cet évènement est déclenché à la source du glisser-déposer, l'élément sur lequel l'évènement dragstart a été déclenché
|
| dragend | La source du glisser-déposer recevra un évènement de ce type lorsque l'opération de glisser-déposer est terminée, qu'elle se soit bien déroulée ou non |
| dragenter | Déclenché lorsque le pointeur de la souris est déplacée pour la première fois au dessus d'un élément pendant le glisser-déposer. Un écouteur d'évènement pourrait alors indiquer si le dépôt des données courantes est autorisée ou non sur cette zone. Si aucun écouteur n'a été défini, ou si ce dernier n'entraîne aucune action, alors, le dépôt n'est par défaut, pas autorisé. C'est également l'évènement à prendre en charge pour donner des retours à l'utilisateur quand à la possibilité qu'il a déposer le contenu du glisser-déposer en affichant une surbrillance ou un marqueur d'insertion |
| dragleave | Cet évènement est déclenché quand la souris quite un élément durant un glisser-déposer. Les écouteurs évènement devraient retirer toute surbrillance ou marqueur d'insertion de cette zone |
| dragover | Cet évènement est déclenché lorsque la souris est déplacée au dessus d'un élément durant un glisser-déposer. La plupart du temps, cet évènement est utilisé pour les mêmes buts que l'évènement dragenter |
| dragstart | Déclenché sur un élément lorsque qu'un glisser-déposer est entrepris. L'utilisateur requiert la possibilité de glisser-déposer l'élément sur lequel cet évènement est déclenché |
| drop | L'évènement drop est déclenché sur l'élément sur lequel le dépôt a été effectué à la fin de l'opération de glisser déposer. Un écouteur d'évènement devrait être responsable de la récupération des données sources du glisser-déposer et de leur insertion sur la zone de dépôt. Cet évènement ne sera déclenché que si le dépôt est désiré. Il ne sera pas déclenché si l'utilisateur annule ce dernier en pressant, par exemple, sur la touche "Echap" de son clavier ou si le bouton de la souris a été relâché alors que le curseur était au-dessus d'une zone pour laquelle le glisser-déposer n'était pas autorisé |
Attributs de l'objet DOMEvent
dataTransfer
un "magasin de données" utilisé pour transporter des informations pendant le processus de glisser-déposer
Attributs et méthodes du magasin de données
Les "magasins de données" possèdent les attributs et méthodes suivants :
dropEffect
Une chaine qui représente l'effect qui sera utilisé, il doit toujours être une des valeurs possibles de effectAllowed.
Pour les événements dragenter et dragover, le dropEffect sera initialisé en fonction de l'action requise par l'utilisateur. La manière dont cela est déterminé dépend de la plateforme, mais typiquement l'utilisateur peut appuyer sur des touches de modification pour préciser l'action souhaitée. A l'intérieur d'un gestionnaire d'événement pour dragenter ou dragover, le dropEffect doit être modifié si l'action que l'utilisateur requiert n'est pas celle qui est souhaitée.
Pour les événements dragstart, drag et dragleave, le dropEffect est initialisé à "none". On peut affecter une valeur à dropEffect, mais cette valeur ne sera pas utilisée.
Pour les événements drop et dragend, la valeur de dropEffect sera l'action souhaitée, c'est-à-dire celle que dropEffect avait après le dernier événement dragenter ou dragover.
Les valeurs possibles sont :
- "copy" : une copie de l'élément source est effectuée dans le nouvel emplacement.
- "move" : un élément est déplacé dans le nouvel emplacement.
- "link" : un lien vers l'élément source est établie dans le nouvel emplacement.
- "none" : l'élément ne peut pas être déposé.
Affecter une autre valeur n'a aucun effet et ne modifie pas la valeur courante.
effectAllowed
Une chaine qui spécifie les effets autorisés pour le déplacement. On peut le définir dans l'événement dragstart pour indiquer les effets souhaités pour la source, et dans les événements dragenter et dragover pour insiquer les effets souhiatés pour la cible. La valeur n'est pas utilisée pour les autres événements.
Les valeurs possibles sont:
- "copy" : une copie de la source peut être effectuée au nouvel emplacement.
- "move" : un élément peut être déplacé au nouvel emplacement.
- "link" : un lien peut être établi vers la source dans le nouvel emplacement.
- "copyLink" : une opération de copie ou de lien est autorisée.
- "copyMove" : une opération de copie ou de déplacement est autorisée.
- "linkMove" : une opération de lien ou de déplacement est autorisée.
- "all" : toutes les opérations sont autorisées.
- "none" : l'élement ne peut pas être déposé.
- "uninitialized" : la valeur par défaut quand l'effet n'a pas été défini, équivalent à "all".
Affecter une autre valeur n'a aucun effet et ne modifie pas la valeur courante.
files
La liste de tous les fichiers locaux disponibles pour le transfert de données. Si l'opération de déplacement n'implique pas de glisser-déposer de fichiers, cette propriété est une liste vide. Une tentative d'accès à un élément de cette liste avec un index non valide renvoie None.
getData(type)
Récupère la donnée pour un type donné, ou une chaine vide si la donnée pour ce type n'existe pas ou que l'attribut dataTransfer ne contient aucune donnée
setData(type, valeur)
Affecte une valeur à un type donné. S'il n'y a pas de données pour ce type, elle est ajoutée à la fin, de façon que le dernier élément de la liste des types sera le nouveau format. Si la donnée pour ce type existe déjà, la valeur courante est remplacée à la même position. Autrement dit, l'ordre de la liste des types n'est pas modifiée quand on change la valeur pour un type.
types
La liste des types de formats des données stockées pour le premier élément, dans l'ordre où les données ont été ajoutées. Si aucune donnée n'a été ajoutée, cette propriété est une liste vide.
Exemple
Voir la recette de glisser-déposer dans le menu Recettes
|
