Dojo Drag Source Builder

Dojo Drag Source Builder

The Dojo Drag Source Builder is used in combination with the Dojo Drop Target Builder to provide drag and drop features on a page. Use the Dojo Drag Source Builder to designate a location on a page as the drag source and to specify a single piece of data to be passed to the target action. The drag drop can operate on a single page or span across multiple pages, such as in a portal environment.

Using the Dojo Drag/Drop builders

Create a model or set of models with pages that will be used for drag and drop functionality.

Add the Dojo Drag Source Builder to your model. Select the desired page location as the drag source and select the data to pass to the drop target.

Add a method to your target model that you wish to have invoked when the drag source is dropped onto the target. The method must take a single String argument. When this method is invoked it will be passed the data from the drag source. Add your logic to this method to take the appropriate action using the specified data.

Add the Dojo Drop Target Builder to your model. Select the desired page location as the drop target and select the new method action you created.

Specifying inputs

This builder takes the inputs described in the table below. For help on inputs common to many or all builders such as those in the Properties and HTML Attributes input groups, see Using the Builder Call Editor.

Input name Description
Name Enter a name for this builder call. The designer tool displays this name in the builder call list.
Page Location page location to enable for drag support. This is the area that the user can select and drag to the drop target.
Note that Depending on the type of area you select, the drag operation may appear to move smoothly, while other areas seem to move slowly or stop. You will need to experiment to see what works best in your situation. Images or entire table areas work fairly well.
Drag Source Data Enter the value to be passed as an input to the drop target method action. For example: ${Variables/orderLoopVar/order/orderID}
Drag Type Specify an arbitrary type used to declare the data being passed to a drop target. This must match the Drop Type input specified in the Dojo drop target builder in order for the target to receive the drag source. For example: orderID

Input name	Description
Name	Enter a name for this builder call. The designer tool displays this name in the builder call list.
Page Location	page location to enable for drag support. This is the area that the user can select and drag to the drop target. Note that Depending on the type of area you select, the drag operation may appear to move smoothly, while other areas seem to move slowly or stop. You will need to experiment to see what works best in your situation. Images or entire table areas work fairly well.
Drag Source Data	Enter the value to be passed as an input to the drop target method action. For example: `${Variables/orderLoopVar/order/orderID}`
Drag Type	Specify an arbitrary type used to declare the data being passed to a drop target. This must match the Drop Type input specified in the Dojo drop target builder in order for the target to receive the drag source. For example: `orderID`