Usage of DragDrop Tags

Question

Hi ,
I have read the documentation of wlp 10.3 regarding drag drop tags but have not got the idea as of yet. How do i use them exactly ?
after initiating the basic structure in the jsp using
<dragdrop:dragDropScript/>
i create a draggable resource as
<dragdrop:draggableResource imageId="0" resourceId="abc" resourceName="abc">
<img src="../images/image.png" width="25" height="25"/>
</dragdrop:draggableResource>
create a drop zone { which i dont understand }
<dragdrop:resourceDropZone targetId="bcd"/>
what is the targetId here ? Is it a reference to say a div id of an html page or something else ?
Can someone provide a basic example to get the idea ?
Thanks,

Answer 1

The resourceDropZone tag provides a way to identify an area (or object) on the page that will "accept" the draggableResource. By "accept", I mean it will trigger a reaction when a draggableResource is dropped on it.
The targetId attribute is a unique identifier for the drop zone and is required. It allows for you to identify on which zone the dragged object was dropped. You can get access to this id on the client using the JavaScript function getTargetId(), or on the server via a request parameter named "targetId".
One of the three following attributes must also be specified: jsFunctionCall, pageFlowAction, or formAction (with that order of precedence if more than one is specified). These attributes identified the resulting action that will be executed when a draggable resource is dropped.
Here is an example. This example shows what could represent a folder icon and how you would enable a drop zone around it to trigger an action.
<dragdrop:resourceDropZone targetId=“${id}” pageFlowAction=“moveIssue”>
<img src=“/folder.gif” />Issue Folder
</ dragdrop:resourceDropZone >
When a draggable resource (presumable representing a file of type "Issue") is dropped onto this folder image, the pageflow action "moveIssue" is called. The id of the folder is a run-time value. In the pageflow controller action "moveIssue", I can get access to the id of the draggable resource via the request parameter "sourceId". And I can get access to the id of the folder it was dropped on via the request parameter "targetId" (which will have the run-time value of ${id} from the page). The moveIssue method on the page flow can now execute all the logic required to move the underlying Issue.
Hope that helps.
- Chuck coates