Page History

...

SingleSelectionDragSourceBead can be used with Lists whose items are to be dragged around. This takes the place of DragMouseControllerbead creates a DragMouseController and listens to its events. This bead also implements IDragInitiator.

SingleSelectionDragImageBead can be used with Lists as quick way to display a drag image from the list's itemRenderer that is being dragged about.

SingleSelectionDropTargetBead can be used with Lists that are accepting drops. This can be the same list that uses SingleSelectionDragSourceBead to allow for items to be re-arranged. This bead creates a DropMouseController and listens to its events.

<js:List>
    <js:beads>
        <js:SingleSelectionDragSourceBead />
        <js:SingleSelectionDragImageBead />
        <js:SingleSelectionDropTargetBead />
        <!-- beads for the data provider -->
    </js:beads>
</js:List>

By having these three beads present, the user will now be able to drag one item from the list to a new location within the same list.  

To Do

...

When the user presses down on an item renderer, the SingleSelectionDragSourceBead will respond by checking to see if there is a drag image; the SingleSelectionDragImageBead will have responded by creating a simple Group+Label as the drag image using the row's data and toString() function; see below to customize the drag image.

As the user drags, the SingleSelectionDropTargetBead is receiving the "dragOver" and "dragEnter" events. This bead does not respond to those, but you could create derivations of it that would respond. 

When the user finally drops, the SingleSelectionDropTargetBead will be notified by the DropMouseController and adds the data from the drag source to the list's data provider. Once the is incorporated, the IDragInitiator, the SingleSelectionDragSourceBead, is called upon to remove the original data unless SingleSelectionDragSourceBead's dragType property was set to "copy".

• These three beads can also be used with DataGrid in exactly the same way as List or DataContainer. 
• Pair SingleSelectionDragSourceBead with SingleSelectionImageBead since the image you want to see is that of the item being dragged.
• Drag between lists by putting SingleSelectionDropTargetBead in another List.

Customizing the Drag Image

When you use the basic DragMouseController and DropMouseController beads, you have to create the drag image yourself. This can be as simple as Label or something more complex; the SingleSelectionDragImageBead creates a Group with a Label child, for example.

When you want to customize the drag image for list or grid drag and drop, you do so by creating a class that extends SingleSelectionDragImageImage and override its protected function, createDragImage(). This function should return a UIBase component. Then you can substitute your custom bead for the <js:SingleSelectionDragImageBead />. 

...