上移下移,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>

延伸阅读