How to add Drag and Drop to a List Box

Top  Previous  Next

Drag and Drop capability for lists means the user can select an item in a list box, hold down the left mouse button, "drag" the item to another control, release the mouse button to "drop" the item on the control, which can look at the data that was "dropped" on it, and then do something with it.

Adding Drag and Drop to a Clarion list box is a simple operation. This section provides an example of dragging an item from one list box to another, within the same application. You can also "Drag and Drop" to or from another application--for example, File Manager.

To implement Drag and Drop, you must add the DRAGID and DROPID attributes to the controls. You can add either or both to a control. The simplest, quickest way to do this is with Property Syntax statements. Assume for this example that the field equate labels for the two list boxes are ?FromList and ?ToList. Assume you want the end user to be able to drag from ?FromList to ?ToList.

Set up ?FromList as a drag host:

1.

RIGHT-CLICK on the list control and choose Properties from the popup menu. The Properties Pad is selected.

2.

In the DragID property, type FromList

This sets the Drag ID signature which identifies "FromList" as the source of any "drag" operation from this control.

 

Set up ?ToList as a drop target:

1.

RIGHT-CLICK on the list control and choose Properties from the popup menu. The Properties Pad is selected.

2.

In the DropID property, type FromList

This sets the Drop ID signature which specifies that the list will accept any "drop" operation with a Drag ID signature of "FromList."

 

Add drag functionality to the drag host, that is, detect a drag event and provide something to drag and drop:

1.

RIGHT-CLICK on the FromList control and choose Embeds from the popup menu.

2.

Locate the "Control Event Handling--?Browse:1--Drag" embed point (Clarion Chain) or Control Events – Drag (ABC Chain) and embed the following code:

 

IF DRAGID()  !Doesn't matter who dropped it for now

SETDROPID('string to drag and drop')! Passing a simple string

END

 

This code detects a drag event--at the time the user releases the mouse button over a valid drop target--and places a string to drag with the SETDROPID function.

You can just as easily use the CHOICE() and GET() functions to retrieve an item from the local QUEUE for the first list box, then place the item in a global QUEUE. Then, upon detecting a drop event in the second list box, you could ADD from the global QUEUE to the local QUEUE for the second list box.

Add drop functionality to the drop target, that is, detect a drop event and retrieve whatever was dropped:

3.

Set the Priority to 1.

 

1.

RIGHT-CLICK on the ToList control and choose Embeds from the popup menu.

2.

Locate the "Control Event Handling--?Browse:1--Drop embed point (Clarion Chain) or Control Events – Drop (ABC Chain) and embed the following code:

MyField = DROPID()   ! Retrieve the passed string

CallMyProcedure      ! Handle the rest in procedure

3.

Set the Priority to 1.

This code detects a drop event--at the time the user releases the mouse button over the drop target--and retrieves the "dropped" string with the DROPID function.

You can just as easily use the CHOICE() and GET() functions to retrieve an item from the local QUEUE for the first list box, then place the item in a global QUEUE. Then, upon detecting a drop event in the second list box, you could ADD from the global QUEUE to the local QUEUE for the second list box.