Custom drag sources and drop targets | HCL Digital Experience

Drag sources and drop targets must be created according to the HTML 5 specification. In HTML 5, the DataTransfer object is used to exchange data from source to target.

{ "uri" : URI }

In the previous example, the URI is the URI of the object that is dragged. If more than one object is dragged, the structure looks like this example.

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

Each URI can have a list of parameters. In this case, the JSON object has the following structure.

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

In the previous example, key_1x:value_1x are the parameters of URI_1 and key_2x:value_2x are the parameters of URI_2.

The theme module i$.dnd provides two convenience functions that simplify the creation of HTML 5 drag sources and drop targets. To create a drag source, you can use the following code.

i$.dnd.addSource(parameter)

In the previous example, the parameter object needs to have the following elements:

{DOMNode} parameter.node

The DOM node that acts as the drag source.

{String} parameter.type

The type of data that is transferred, typically "Text".

{Object} parameter.data

The data to transfer when dropped. When you exchang data with a standard HCL Portal drop target, it must be a stringified JSON object with the structure described before.

{DOMNode} parameter.avatar

The DOM node to use as the DnD avatar. (optional)

{Function} parameter.dragstart

A function to start when dragstart is called. (optional) The following parameters are passed to this function:

{Event} e

The event. For example, you can use the event to set e.dataTransfer.effectAllowed = "copy";.

{DOMNode} n

The DomNode of the source area.

{Function} parameter.dragend

A function to start when dragend is called. It has the same parameters as parameter.dragstart. (optional)

To create a drop target, you can use the following code.

i$.dnd.addTarget(parameter)

In the previous example, the parameter object must have the following elements:

{DOMNode} parameter.node

The DOMnode acting as the drop target.

{String} parameter.type

The type of data that is transferred, typically "Text".

{Function} parameter.drop

Function to handle the drop event. The following parameters are passed to this function:

{Event} e

The drop event.

{DOMNode} n

The DOM node of the drop target.

{String} type

The type of data that is transferred.

{Object} data

The data that was transferred from the drag source. When receiving data from standard HCL Portal drag sources, it is a stringified JSON object with the structure described before.

{Function} parameter.dragenter

Function to start when dragenter is called. (optional) The following parameters are passed to this function:

{Event} e

The event.

{DOMNode} n

The DOM node of the drop target.

{Function} parameter.dragleave

Function to start when dragend is called with the same parameters as dragenter. (optional)

{Function} parameter.dragover

Function to start when dragover is called with the same parameters as dragenter. (optional)