두개의 Panel 컴포넌트 를 배치하고 각 Panel에는 2 개의 List 컴포넌트를 배치한다. 단방향이라는 title을 갖는 panel에는 한쪽 방향으로만 드래그 드롭이 구현되고 양방향이라는 title를 갖는 panel에는 List 컴포넌트간에 상호 드래그 드롭이 구현되게 만들었다.

소스 및 폼

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
			layout="absolute" fontFamily="굴림체" fontSize="16">

	<mx:ArrayCollection id="LeftData1" >
		<mx:Object label="1 Item" />
		<mx:Object label="2 Item" />
		<mx:Object label="3 Item" />
		<mx:Object label="4 Item" />
		<mx:Object label="5 Item" />
		<mx:Object label="6 Item" />
	</mx:ArrayCollection>

	<mx:ArrayCollection id="LeftData2" >
		<mx:Object label="2-1 Item" />
		<mx:Object label="2-2 Item" />
		<mx:Object label="2-3 Item" />
		<mx:Object label="2-4 Item" />
		<mx:Object label="2-5 Item" />
		<mx:Object label="2-6 Item" />
	</mx:ArrayCollection>
	
	<mx:Panel y="27" width="388" height="337" 
			layout="absolute" title="단방향" horizontalCenter="-204">
		<mx:List id="lbLeft0" 
			 dataProvider="{LeftData1}"
			 dragEnabled="true"  	
			 y="19" width="162" height="243" horizontalCenter="-86" > 
		</mx:List>
		<mx:List id="lbRight0"
			 dropEnabled="true" 
			 y="19" width="162" height="243" horizontalCenter="84" > 
		</mx:List>
	</mx:Panel>
	
	<mx:Panel y="27" width="388" height="337" 
			layout="absolute" title="양방향" horizontalCenter="206">
		<mx:List id="lbLeft1" 
		     	 dataProvider="{LeftData2}"
			 dragEnabled="true" dropEnabled="true"   
			 y="21" width="162" height="243" horizontalCenter="-93" > 
		</mx:List>
		<mx:List id="lbRight1"
			 dragEnabled="true"  dropEnabled="true" 
			 y="21" width="162" height="243" horizontalCenter="77" > 
		</mx:List>
	</mx:Panel>
	
</mx:Application>

예제 실행

목록에 있는 아이템을 드래그하여 반대편에 놓아 보세요.