Drag imag from list to another list

 <?xml version="1.0" encoding="utf-8"?>  
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
         xmlns:s="library://ns.adobe.com/flex/spark"   
         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">  
   <s:Panel title="Palette" left="8" top="8" >  
     <s:List id="paletteList" left="3" right="3" top="3" bottom="3"  
         dragEnabled="true"  
         dropEnabled="true"  
         dragMoveEnabled="true"  
         itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" verticalCenter="0">  
     <s:ArrayList>  
       <s:Image source="@Embed('rec.gif')"/>  
       <s:Image source="@Embed('box.gif')"/>  
       <s:Image source="@Embed('start.gif')"/>  
     </s:ArrayList>  
     <s:layout>  
       <s:VerticalLayout paddingLeft="7" paddingRight="7" paddingTop="7" paddingBottom="7" gap="7" />  
     </s:layout>  
   </s:List>  
   </s:Panel>  
   <s:Panel title="Color List" left="136" top="8" bottom="8" width="555">  
     <s:List id="colorList" left="3" right="3" top="3" bottom="3"  
         dragEnabled="true"  
         dropEnabled="true"  
         dragMoveEnabled="true"  
         itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"  
         styleName="drop">  
       <!-- we MUST have a blank array -->  
       <s:ArrayList></s:ArrayList>  
       <s:layout>  
         <s:VerticalLayout paddingLeft="7" paddingRight="7" paddingTop="7" paddingBottom="7" gap="7" />  
       </s:layout>  
     </s:List>  
   </s:Panel>            
 </s:Application>