<p>Flex has built in drag-n-drop for list controls, and allows you to override this. But they don't cover this in examples. The built-in functionality automatically drags the list-item, if you want to override this you find the handlers are being set up on the list itself.
What I specifically want to do, is my TileList shows small thumbnails of items I can drag onto a large Canvas. As I drag an item from the list, the drag proxy should be a different image.</p>

<p><strong>So, I followed the technique suggested and it only works if I explicitly set the width/height on the proxy Image. Why?</strong></p>

[{'answer_id': 75541, 'author': 'Theo', 'author_id': 1109, 'author_profile': 'https://Stackoverflow.com/users/1109', 'pm_score': 2, 'selected': False, 'text': '<p>It\'s not obvious until you\'ve tried it =) I struggled with the same thing just a few weeks ago. This was my solution:</p>\n\n<p>The list:</p>\n\n<pre><code>&lt;List&gt;\n  &lt;mouseDown&gt;onListMouseDown(event)&lt;/mouseDown&gt;\n&lt;/Tree&gt;\n</code></pre>\n\n<p>The mouse down handler:</p>\n\n<pre><code>private function onMouseDown( event : MouseEvent ) : void {\n  var list : List = List(event.currentTarget);\n\n  // the data of the clicked row, change the name of the class to your own\n  var item : MyDataType = MyDataType(list.selectedItem);\n\n  var source : DragSource = new DragSource();\n\n  // MyAwsomeDragFormat is the key that you will retrieve the data by in the\n  // component that handles the drop\n  source.addData(item, "MyAwsomeDragFormat");\n\n  // this is the component that will be shown as the drag proxy image\n  var dragView : UIComponent = new Image();\n\n  // set the source of the image to a bigger version here\n  dragView.source = getABiggerImage(item);\n\n  // get hold of the renderer of the clicked row, to use as the drag initiator\n  var rowRenderer : UIComponent = UIComponent(list.indexToItemRenderer(list.selectedIndex));\n\n  DragManager.doDrag(\n    rowRenderer,\n    source,\n    event,\n    dragView\n  );\n}\n</code></pre>\n\n<p>That will start the drag when the user clicks an item in the list. Notice that I don\'t set <code>dragEnabled</code> and the other drag-related properties on the list since I handle all that myself.</p>\n\n<p>It can be useful to add this to the beginning of the event handler:</p>\n\n<pre><code>if ( event.target is ScrollThumb || event.target is Button ) {\n  return;\n}\n</code></pre>\n\n<p>Just to short circuit if the user clicks somewhere in the scrollbar. It\'s not very elegant but it does the job.</p>\n'}, {'answer_id': 2185111, 'author': 'Ola', 'author_id': 264449, 'author_profile': 'https://Stackoverflow.com/users/264449', 'pm_score': 1, 'selected': False, 'text': '<p>I found a simpler answer <a href="http://www.dgrigg.com/post.cfm/11/03/2006/DataGrid-Drag-Image" rel="nofollow noreferrer">here</a>.  That example extends a DataGrid control, but you can do the same with a List control.  In my case, I use an image source instead of Class:</p>\n\n<pre><code>public class CustomDragList extends List {\n\n    [Bindable]\n    public var dragProxyImageSource:Object;\n\n    override protected function get dragImage():IUIComponent {\n        var image:Image = new Image();\n        image.width = 50;\n        image.height = 50;\n        image.source = dragProxyImageSource;\n        image.owner = this;\n        return image;\n    }\n}\n</code></pre>\n\n<p>Then use that custom list like this:</p>\n\n<pre><code>&lt;control:CustomDragList\n    allowMultipleSelection="true"\n    dragEnabled="true" \n    dragProxyImageSource="{someImageSource}"\n    dragStart="onDragStart(event)"/&gt;\n</code></pre>\n\n<p>Where \'someImageSource\' can be anything you\'d normally use for an image source (embedded, linked, etc.)</p>\n'}]
['https://Stackoverflow.com/questions/74951', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/13220/']