Flex: Drag-and-drop onto List item

Question

I have a List with an item renderer and would like to enable drag-and-drop onto the items in the list, rather than adding the data to the list. Is it possible to find the item that is being hovered over when dragging?

Answer 1

You can save the data that is being dragged from another element, using a "dragHandler" when the drag action starts like this:

dragStart="dragHandler(event)"

"dragHandler" should look like this:

protected function dragHandler(event:DragEvent):void{
     yourSourceList.selectedItems;
}

You can save the selectedItems in a vector because that is the nature of the elements being dragged.

Then in the itemRenderer of the list where you are going to drop the elements you have to set the property "dragEnter" in an element of the itemRenderer like a Group or a SkinnableContainer:

dragEnter="dragEnterHandler(event)"

Your "dragEnterHandler" should look like this:

private function dragEnterHandler(e:DragEvent):void {
      DragManager.acceptDragDrop(e.currentTarget as IUIComponent);
}

Doing this will prevent the elements from being added to your list.

And still in your Group or Skinnablecontainer of your itemRenderer you should have a "dragDrop" property set:

dragDrop="dragDropHandler(event)"

Then your "dragDropHandler"should look like this:

private function dragDropHandler(e:DragEvent):void {
     //Do something when the elements are dropped
}

This way you don't have the need to explore the event variable of the dropped element because you already saved the items dragged in the "dragHandler" method