Flex中List实现上移下移功能

我们在HTML中可以用JS实现Selecte框中内容的上移下移。昨天在项目中需要用Flex来实现这个功能。研究了一下 不难。

下面是具体实现代码：

<?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"
			    width="100%" height="100%" 
			 >
	<fx:Style source="../../sps/sheet/css/forms.css"/>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.utils.ObjectUtil;
			private var dp:ArrayCollection=new ArrayCollection([
				{Artist:'Pavement1', Album:'Slanted and Enchanted', 
					Price:11.99, InStock: true},
				{Artist:'Pavement2', Album:'Crooked Rain, Crooked Rain', 
					Price:10.99, InStock: false},
				{Artist:'Pavement3', Album:'Wowee Zowee', 
					Price:12.99, InStock: true},
				{Artist:'Asphalt1', Album:'Brighten the Corners', 
					Price:11.99, InStock: false},
				{Artist:'Asphalt2', Album:'Terror Twilight', 
					Price:11.99, InStock: true},
				{Artist:'Asphalt3', Album:'Buildings Meet the Sky', 
					Price:14.99, InStock: true},
				{Artist:'Other', Album:'Other', Price:5.99, InStock: true}
			]);
			
			private function up():void{
				if(list.selectedIndex>0){
					var i:int=list.selectedIndex;
					var tmp:Object=ObjectUtil.copy(list.selectedItem);
					var tmpupper:Object=dp.getItemAt(i-1);
					dp.setItemAt(tmpupper,i);
					dp.setItemAt(tmp,i-1);
					list.selectedIndex=i-1;
					list.selectedItem=tmp;
				}
			}
			private function down():void{
				if (list.selectedIndex<dp.length-1){
					var i:int=list.selectedIndex;
					var tmp:Object=ObjectUtil.copy(list.selectedItem);
					var tmplower:Object=dp.getItemAt(i+1);
					dp.setItemAt(tmplower,i);
					dp.setItemAt(tmp,i+1);
					list.selectedIndex=i+1;
					list.selectedItem=tmp;
				}
			}

		]]>
	</fx:Script>
	<s:Group width="100%" height="50%" id="a">
		
	</s:Group>
	<s:Group>
		<s:layout  >
			<s:VerticalLayout/>
		</s:layout>
		<mx:List dataProvider="{dp}" id="list" labelField="Artist"></mx:List>
		<mx:Button label="UP" click="{up();}" enabled="{list.selectedItem!=null}"/>
		<mx:Button label="DOWN" click="{down();}" enabled="{list.selectedItem!=null}"/>

	</s:Group>
</s:Application>