Custom drag sources and drop targets

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.

The source sets the data with dataTransfer.setData(format, data) and the target reads the data with dataTransfer.getData(format). WebSphere Portal always uses format = "Text". The data is a stringified JSON object with the following structure:

{ "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, 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 we exchang data with a standard WebSphere 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, 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, 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 WebSphere 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)

Parent Drag-and-drop