Introduction

Installation

Questions fréquemment posées

Syntaxe, mots-clés et fonctions intégrées

Distribution standard

Implémentation de import

Interface avec le navigateur

Introduction - API DOM
Créer un document
Accéder aux éléments
Attributs et méthodes

Evénements
Evénements souris
Evénements clavier
Evénements focus
Evénements pour glisser-déposer

Chaine de requête

Objets et librairies Javascript

Modules intégrés propres à Brython

browser
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.websocket
browser.webworker

javascript

asyncio

Travailler avec Brython

Options de la fonction brython()
Test, débogage et profilage
Deployer une application

Recettes

Salut !
Insérer du contenu dans un élément
Mise en forme HTML (gras, italique...)
Table HTML
Attacher / détacher des événements
Gérer la sélection d'options dans un SELECT
Glisser-déposer
Obtenir le contenu d'un élément
Lire le contenu d'un fichier
Stocker des objets localement
Exemple de onmouseover
 

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é
dragendLa 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
dragenterDé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
dragleaveCet é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
dragoverCet é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
dragstartDé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é
dropL'é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