Class: DragAndDropClient

Drag and Drop Client

The Drag and Drop Client acts as an API to share data between components via a user action i.e., drag and drop. As an example, consider a user wanting to share a chart inside a chat - they can do so using the Drag and Drop Service.

A component that shares data needs to publish the data types it can share by calling setEmitters. The Window Manager automatically adds a draggable share icon to any component that calls setEmitters. Similarly, a component that can receive data needs to publish that using addReceivers. Since it is possible to have multiple components on a page receiving the data, you can add multiple receivers for the same data type.

The Drag and Drop Client overlays a scrim on all windows once the user starts dragging a sharable item. The scrim displays which windows can and cannot receive that data. However, this doesn't always work well, especially with complex third party components. You may need to add your own drop zone to the component and use drop as the handler.

The Drag and Drop Client can also make use of the Linker Client to share data between linked windows using openSharedData.

For more information, see the Drag and Drop tutorial.

Methods

addReceivers
(params)

Adds receivers for the data that can be received by the component. There can be any number of receivers for each data type. You can also use regular expressions to specify the data that can be received.

Name Type Description
params
Name Type Description
receivers receiver[]

This is a list of objects (`{ type: string, handler: function }`), each containing a type and a handler function to call with the data once received. The receiver can take a regular expression as its type to provide the ability to receive multiple data types. Each type can have multiple handlers so you can use the same type multiple times in your call.

Example
FSBL.Clients.DragAndDropClient.addReceivers({
	receivers: [
		{
			type: "symbol",
		 	handler: changeSymbol
		}, {
			type: "chartiq.chart",
			handler: openChart
		}
])
FSBL.Clients.DragAndDropClient.addReceivers({
	receivers: [
		{
			type: /.*/,
	 		handler: getEverythingAComponentCanEmit
		}
	]
})

dragStart
(event)

This is a drag event handler for an element that can be dragged to share data. Our sample Window Title Bar component uses this internally when the share icon is dragged. This can be attached to any element that needs to be draggable. The data from all emitters that match receivers in the drop component is automatically shared.

Name Type Description
event any

dragStartWithData
(event, data)

This is a drag event handler to enable dragging specific data that is not tied to an emitter. For example, an item in a list.

Name Type Description
event any
data any

Example
element.addEventListener('dragstart', function(event) {
		var data = {
			'rsrchx.report': {
				url: event.target.href,
			}
		};
		FSBL.Clients.DragAndDropClient.dragStartWithData(event, data);
})

drop
(event)

This is a drop event handler that can be attached to any element that you want to be a drop zone for the Drag and Drop Client. It automatically requests data for all the data elements that are common between the receiver and the emitter.

Name Type Description
event any

openSharedData
(params, cb)

This will either open a component with the shared data or publish the shared data using the Linker Client if the window is linked.

Name Type Description
params
Name Type Description
data any optional

Data to pass to the opened component.

multipleOpenerHandler Function optional

Optional. This function is called with on object that contains a map of componentTypes to the data types they can open. It must return a list of components to be opened. If no handler is provided, the first found component will be chosen. It is possible that the component opened may not handle all the data provided.

publishOnly boolean optional

if the component is linked, this will only publish the data, not force open a window if it does not exist. If the component is not linked, this is ignored.

cb StandardCallback

Callback invoked with action taken.

setEmitters
(params)

This sets all the data that can be shared by the component. There can only be one emitter for each data type.

Name Type Description
params
Name Type Description
emitters emitter[]

This is a list of objects (`{ type: string, data: function }`) which contain a type and a function to get the data.

Example
FSBL.Clients.DragAndDropClient.setEmitters({
	emitters: [
		{
			type: "symbol",
			data: getSymbol
		},
		{
			type: "chartiq.chart",
			data: getChart
		}
	]
})