Opération glisser-déposer dans HTMLAdobe AIR 1.0 et ultérieur Pour faire glisser des données vers une application HTML ou hors de cette dernière (ou vers le code HTML affiché dans un objet HTMLLoader et hors de ce dernier), vous disposez des événements glisser-déposer HTML. L’API glisser-déposer HTML vous permet de faire glisser des données vers des éléments DOM ou à partir de ces derniers dans le contenu HTML. Remarque : vous pouvez également utiliser les API NativeDragEvent et NativeDragManager d’AIR en écoutant les événements sur l’objet HTMLLoader qui comporte le contenu HTML. L’API HTML est toutefois mieux intégrée au DOM HTML et permet de contrôler le comportement par défaut.
Comportement par défaut des mouvements glisser-déposerL’environnement HTML définit le comportement par défaut des actions glisser-déposer qui impliquent du texte, des images et des URL. Le comportement par défaut permet de faire glisser ces types de données hors d’un élément. Vous ne pouvez toutefois faire glisser que du texte vers un élément, sous réserve qu’il réside dans une zone modifiable de page. Lorsque vous faites glisser du texte entre des zones modifiables d’une page ou au sein de l’une de ces zones, le comportement par défaut consiste à exécuter une action de déplacement. Lorsque vous faites glisser du texte vers une zone modifiable à partir d’une zone non modifiable ou de l’extérieur de l’application, le comportement par défaut consiste à exécuter une action de copie. Vous pouvez remplacer le comportement par défaut en gérant vous-même les événements glisser-déposer. Pour annuler le comportement par défaut, vous devez appeler les méthodes preventDefault() des objets distribués suite aux événements glisser-déposer. Vous pouvez ensuite insérer des données dans la cible du dépôt et supprimer les données de la source du glissement pour exécuter l’action sélectionnée. Par défaut, l’utilisateur peut sélectionner et faire glisser n’importe quel texte. Il peut faire glisser des images et des liens. La propriété CSS WebKit, -webkit-user-select, permet de contrôler le mode de sélection de tout élément HTML. Par exemple, si vous définissez -webkit-user-select sur none, il est impossible de sélectionner les contenus d’élément et, par conséquent, de les faire glisser. La propriété CSS -webkit-user-drag permet également de déterminer s’il est possible de faire glisser un élément global. Le contenu de l’élément est toutefois traité séparément. L’utilisateur peut néanmoins faire glisser une section sélectionnée de texte. Pour plus d’informations, voir la section CSS dans AIR. Evénements glisser-déposer dans HTMLLes événements distribués par l’élément initiateur à l’origine d’un glissement sont indiqués dans le tableau suivant :
Les événements distribués par une cible de glissement sont les suivants :
L’objet événement distribué en réponse à ces événements est similaire à un événement souris. Les propriétés d’événement souris telles que (clientX, clientY) et (screenX, screenY) permettent de déterminer la position de la souris. La principale propriété d’un objet événement drag correspond à dataTransfer, qui contient les données en cours de glissement. L’objet dataTransfer en tant que tel dispose des propriétés et méthodes suivantes :
Types MIME associés à l’événement glisser-déposer HTMLLes types MIME à utiliser avec l’objet dataTransfer d’un événement glisser-déposer HTML sont indiqués dans le tableau suivant :
Vous disposez également d’autres chaînes MIME, notamment les chaînes définies par une application. D’autres applications risquent toutefois de ne pas pouvoir reconnaître ou utiliser les données transférées. Il vous incombe d’ajouter des données à l’objet dataTransfer dans le format attendu. Important : seul le code qui s’exécute dans le sandbox d’application peut accéder aux fichiers déposés. Toute tentative de lecture ou de définition de propriété d’un objet File au sein d’un sandbox hors application génère une erreur de sécurité. Pour plus d’informations, voir la section Gestion des dépôts de fichier dans un sandbox HTML hors application.
Effets de glissement dans HTMLL’initiateur du mouvement de glissement peut limiter les effets de glissement autorisés en définissant la propriété dataTransfer.effectAllowed du gestionnaire de l’événement dragstart. Les valeurs de chaîne suivantes sont prises en charge :
La cible du mouvement de glissement peut définir la propriété dataTransfer.dropEffect pour indiquer l’action exécutée si l’utilisateur achève le dépôt. Si l’effet de dépôt fait partie des actions autorisées, le système affiche le curseur de copie, déplacement ou lien approprié. Dans le cas contraire, le système affiche le curseur unavailable. Si aucun effet de dépôt n’est défini par la cible, l’utilisateur peut choisir les actions autorisées par le biais des touches de modification. Le code suivant définit la valeur dropEffect dans les gestionnaires des événements dragover et dragenter : function doDragStart(event) { event.dataTransfer.setData("text/plain","Text to drag"); event.dataTransfer.effectAllowed = "copyMove"; } function doDragOver(event) { event.dataTransfer.dropEffect = "copy"; } function doDragEnter(event) { event.dataTransfer.dropEffect = "copy"; } Remarque : bien qu’il soit recommandé de définir systématiquement la propriété dropEffect dans le gestionnaire de l’événement dragenter, notez que l’événement dragover suivant réinitialise la valeur par défaut de la propriété. Définissez dropEffect en réponse aux deux événements.
|
|