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 dataType.

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 FSBL.DragAndDropClient.drop as the handler.

The Drag and Drop Client can also make use of the Linker Client to share data between linked windows. See DragAndDropClient.html#drop.

Here is a tutorial on using the Drag and Drop Client.

Members

openLinkerDataByDefault

Default: true

Set this to false to disable handling of linked data

SHARE_METHOD

This constant object contains all the share methods. You can use it in a receive handler to handle different share methods. Current share methods are

* SHARE_METHOD.DROP
* SHARE_METHOD.SPAWN
* SHARE_METHOD.LINKER
Example
// Ignore data unless it was dropped
function shareHandler(err, response) {
	if(response.shareMethod != FSBL.Clients.DragAndDropClient.SHARE_METHOD.DROP) {
		return;
	}
	// Handle dropped data below:
}

Methods

addReceivers
()
clients/dragAndDropClient.js, line 159

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

Name Type Description
params.receivers object

This is a list of objects, 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
DragAndDropClient.addReceivers({
	receivers: [
		{
			type: "symbol",
		 	handler: changeSymbol
		}, {
			type: "chartiq.chart",
			handler: openChart
		}
	])
DragAndDropClient.addReceivers({
	receivers: [
		{
			type: /.*/,
	 		handler: getEverythingAComponentCanEmit
		}
	])

dragStart
(event)
clients/dragAndDropClient.js, line 319

This is a drag event handler for an element that can be dragged to share data. Our sample Window Title 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 event

dragStartWithData
(event, data)
clients/dragAndDropClient.js, line 347

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 event
data any
Example
element.addEventListener('dragstart', fuction(event) {
		var data = {
			'rsrchx.report': {
				url: event.target.href,
			}
		};
		FSBL.Clients.DragAndDropClient.dragStartWithData(event, data);
})

drop
(event)
clients/dragAndDropClient.js, line 389

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 event

openSharedData
(params, cb)
Experimental
clients/dragAndDropClient.js, line 502

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

Since:
  • 1.5: multipleOpenerHandler and callback added
Name Type Description
params object
Name Type Description
data object optional
publishOnly bool 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.

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.

cb function

Callback invoked with action taken.

setEmitters
()
clients/dragAndDropClient.js, line 112

setEmitters 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.emitters object

This is a list of objects which contain a dataType and a function to get the data.

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