그림을 자세히 보시려면 그림을 클릭하세요.문서에 첨부된 이미지는 축소하여 올렸습니다. 그림을 자세히 보시려면 그림 파일을 클릭하세요. 큰 화면으로 보실 수 있습니다. ^^

드래그가 가능한 그림이미지를 담은 List 한개와 드롭이 가능한 빈 List 을 담은 pannel을 구성하여 이미지의 드래그 드롭이 한쪽 방향으로 진행되는 것을 보여주는 예제이다.

소스 및 폼

<?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 image="image/black.png" />
		<mx:Object image="image/red.png"   />
		<mx:Object image="image/blue.png"  />
		<mx:Object image="image/green.png" />
		<mx:Object image="image/white.png" />
	</mx:ArrayCollection>

	<mx:Panel y="27" width="388" height="337" layout="absolute" title="단방향" horizontalCenter="0">
		<mx:List id="lbLeft0" 
				 dataProvider="{LeftData1}"
				 dragEnabled="true"  	
			     y="19" width="162" height="243" horizontalCenter="-86" >
			<mx:itemRenderer>
				<mx:Component>
					<mx:Image source="{data.image}" /> 
				</mx:Component>
			</mx:itemRenderer>
			      
		</mx:List>
		<mx:List id="lbRight0"
				 dropEnabled="true" 
			     y="19" width="162" height="243" horizontalCenter="84" > 
			<mx:itemRenderer>
				<mx:Component>
					<mx:Image source="{data.image}" /> 
				</mx:Component>
			</mx:itemRenderer>
		</mx:List>
	</mx:Panel>
</mx:Application>

예제 실행

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

 

이 게시물을...