이미지를 포함하고 있는 List 컴포넌트를 이용하여 드래그 드롭 이벤트 함수를 직접 작성하여 간단한 드래그 드롭에 대한 처리를 설명하는 예제이다.

소스 및 폼

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
				fontFamily="굴림체" fontSize="16"
				creationComplete="CreaetApp()">
				
	<mx:Script>
	<![CDATA[
	
	import mx.controls.Image;
	import mx.collections.ArrayCollection;
	import mx.core.DragSource;
    import mx.managers.DragManager;
    import mx.core.IUIComponent;
    import mx.events. *;

	[Bindable] private var lbdataL1 : ArrayCollection;
	[Bindable] private var lbdataL2 : ArrayCollection;
	[Bindable] private var lbdataR  : ArrayCollection;

	[Bindable] [Embed(source='image/black.png')] private var imgBlack:Class;
	[Bindable] [Embed(source='image/red.png')]   private var imgRed:Class;
	[Bindable] [Embed(source='image/blue.png')]  private var imgBlue:Class;
	[Bindable] [Embed(source='image/green.png')] private var imgGreen:Class;
	[Bindable] [Embed(source='image/white.png')] private var imgWhite:Class;

	private function CreaetApp():void {
		
		lbdataL1 = new ArrayCollection();
		
		lbdataL1.addItem({image:imgBlack});
		lbdataL1.addItem({image:imgRed}  );
		lbdataL1.addItem({image:imgBlue} );
		lbdataL1.addItem({image:imgGreen});
		lbdataL1.addItem({image:imgWhite});

		lbdataL2 = new ArrayCollection();
		
		lbdataL2.addItem({image:imgBlack});
		lbdataL2.addItem({image:imgRed}  );
		lbdataL2.addItem({image:imgBlue} );
		lbdataL2.addItem({image:imgGreen});
		lbdataL2.addItem({image:imgWhite});
		
		lbLeft0.dataProvider=lbdataL1;
		lbLeft1.dataProvider=lbdataL2;

		lbdataR = new ArrayCollection();
		lbRight0.dataProvider=lbdataR;
    }
    
	private function doDragEnter(event:DragEvent) :void {
		var dragInitiator:List = List(event.dragInitiator);
		var dragTarget:List    = List(event.currentTarget);

		if( dragInitiator.id == "lbLeft0" )
		{
        	DragManager.acceptDragDrop(dragTarget);
        	DragManager.showFeedback(DragManager.COPY);
  		}		
	}
	
	private function doDragDrop(event:DragEvent) :void {
		var item:Object = lbLeft0.selectedItem;

        lbdataR.addItem(item);
        event.preventDefault();			
    }

	]]>
	</mx:Script>
	
	<mx:Panel y="10" width="388" height="457" 
             layout="absolute" horizontalCenter="0" title="단방향">
		<mx:List id="lbLeft0" 
			 dragEnabled="true"  	
			 y="19" width="162" height="187" horizontalCenter="-86"  
			 rowHeight="64">
		
			<mx:itemRenderer>
				<mx:Component>
					<mx:Image source="{data.image}" /> 
				</mx:Component>
			</mx:itemRenderer>
			      
		</mx:List>
		<mx:List id="lbLeft1"
			 dragEnabled="true"  	
			 y="216" width="162" height="178" horizontalCenter="-86"
			 rowHeight="64"> 
			<mx:itemRenderer>
				<mx:Component>
					<mx:Image source="{data.image}" /> 
				</mx:Component>
			</mx:itemRenderer>
		</mx:List>
		
		<mx:List id="lbRight0"
			 dragEnter="doDragEnter(event)"	
			 dragDrop="doDragDrop(event)"  	
			 y="19" width="162" height="375" horizontalCenter="84"  rowHeight="64"> 
			<mx:itemRenderer>
				<mx:Component>
					<mx:Image source="{data.image}" /> 
				</mx:Component>
			</mx:itemRenderer>
		</mx:List>
	</mx:Panel>
	
</mx:Application>

예제 실행