Flex ItemRenderer: rendering the source item of a drag

Question

When an item is being dragged from/within a list in the default implementation, it is shown as selected during the drag (and a separate item renderer, in dragging state, is shown as the drag image), so:

<s:ItemRenderer>
    <s:Label text="{data}" color.selected="0xFF0000" color.dragging="0x00FF00" />
</s:ItemRenderer>

renders as:

ListItemRenderer in normal, selected, and dragging states

Is there a straightforward way to change the state of the source of the drag (the red, selected, "Bar") to something other than "selected" for the duration of the drag?

In the ideal, I would add color.dragSource="0x0000FF" to the item renderer code above, and "Bar" would be red while selected, but blue once the dragging had begun. When the drag was complete, it would revert to red (or, if no longer selected, black).

Shouldn't a list have a way to change the visual display of the selected item? Possibly through the use of styles. — JeffryHouser
I'm hoping for a difference between "selected" and "currently being dragged", though--is there a clear way to differentiate? — Michael Brewer-Davis
Not that I know of.. assuming the list only allows a single selection; you could tweak the selected item styles on the fly. — JeffryHouser

Dom Dom · Accepted Answer · 2012-06-05T20:13:59

What if you did an eventListener on drag start that set the selected item in the list to -1? -1 says that nothing should be selected.

Edit: added below code to support:

<s:List id="myList" dragStart="startDrag(event)"/>

private var dragIndex:int;

private function startDrag(e:Event):void
{
    dragIndex = myList.selectedIndex;
    myList.selectedIndex = -1;
}

private function stopDrag(e:Event):void
{
    myList.selectedIndex = dragIndex;
}

Flex ItemRenderer: rendering the source item of a drag

1 Answers