Sources de déplacement et cibles de dépôt personnalisées

Les sources de déplacement et les cibles de dépôt doivent être créées en fonction de la spécification HTML 5. En HTML 5, l'objet DataTransfer est utilisé pour échanger des données entre la source et la cible.

{ "uri" : URI }

Dans l'exemple précédent, l'URI est celui de l'objet qui est déplacé. Si plusieurs objets sont déplacés, la structure se présente comme suit.

{ "uri" : [ URI_1, URI_2, ... ] }

Chaque URI peut avoir une liste de paramètres. Dans ce cas, la structure de l'objet JSON est la suivante.

{ "uri" : [ { key_11 : value_11, key_12 : value_12, ... }, URI_1, { key_21 : value_21, key_22 : value_22, ... }, URI_2, ... ] }

Dans l'exemple précédent, key_1x:value_1x sont les paramètres de URI_1 et key_2x:value_2x sont les paramètres de URI_2.

Le module de thème i$.dnd fournit deux fonctions pratiques qui simplifient la création des sources de déplacement et des cibles de dépôt HTML 5. Pour créer une source de déplacement, vous pouvez utiliser le code ci-dessous.

i$.dnd.addSource(parameter)

Dans l'exemple précédent, l'objet de paramètre doit comporter les éléments suivants :

{DOMNode} parameter.node

Noeud DOM qui joue le rôle de source de déplacement.

{String} parameter.type

Type de données transféré, généralement "Text".

{Object} parameter.data

Données à transférer lorsqu'elles sont déposées. Lorsque vous échangez des données avec une cible de dépôt HCL Portal standard, il doit s'agir d'un objet JSON au format chaîne avec la structure indiquée précédemment.

{DOMNode} parameter.avatar

Nœud DOM utilisé comme avatar DnD. (facultatif)

{Function} parameter.dragstart

Fonction à démarrer lorsque dragstart est appelé. (facultatif) Les paramètres suivants sont transmis à cette fonction :

{Event} e

Evénement. Par exemple, vous pouvez utiliser l'événement pour définir e.dataTransfer.effectAllowed = "copy";.

{DOMNode} n

Paramètre DomNode de la zone source.

{Function} parameter.dragend

Fonction à démarrer lorsque dragend est appelé. Elle comporte les mêmes paramètres que parameter.dragstart. (facultatif)

Pour créer une cible de dépôt, vous pouvez utiliser le code ci-dessous.

i$.dnd.addTarget(parameter)

Dans l'exemple précédent, l'objet de paramètre doit comporter les éléments suivants :

{DOMNode} parameter.node

Paramètre DOMnode qui joue le rôle de cible de dépôt.

{String} parameter.type

Type de données transféré, généralement "Text".

{Function} parameter.drop

Fonction permettant de gérer l'événement de dépôt. Les paramètres suivants sont transmis à cette fonction :

{Event} e

Evénement de dépôt.

{DOMNode} n

Noeud DOM de la cible de dépôt.

{String} type

Type de données transféré.

{Object} data

Données transférées de la source de déplacement. Lors de la réception de données à partir de sources de déplacement HCL Portal standard, il s'agit d'un objet JSON au format chaîne, avec la structure indiquée précédemment.

{Function} parameter.dragenter

Fonction à démarrer lorsque dragenter est appelé. (facultatif) Les paramètres suivants sont transmis à cette fonction :

{Event} e

Evénement.

{DOMNode} n

Noeud DOM de la cible de dépôt.

{Function} parameter.dragleave

Fonction à démarrer lorsque dragend est appelé avec les mêmes paramètres que dragenter. (facultatif)

{Function} parameter.dragover

Fonction à démarrer lorsque dragover est appelé avec les mêmes paramètres que dragenter. (facultatif)