TileList Moving Items Up/Down

Question

I cannot figure out how to move items in a TileList with
ActionScript. In the sample, when you run it, the moves work if the
item where the selected item will be moved is being displayed, then
it works as expected, but if you scroll down, and then move an item
up to a spot that is not currently displayed, then the item is not
selected, and sometimes the first item is deleted even though the 2
involved items are not near the first item.
<?xml version="1.0"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete = "initData();" >
<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.collections.*;
private var listArray:Array = new Array;
[Bindable]
public var TileListdp:ArrayCollection;
private function initData():void {
var oItem:Object;
for (var i:int = 0; i < 20; i++) {
oItem = new Object;
oItem.label = "Label" + i;
oItem.data = i;
listArray.push(oItem);
TileListdp = new ArrayCollection(listArray);
private function onUpClick(event:Event):void {
var iCurSelect:int = tlList.selectedIndex;
if (iCurSelect != -1 && iCurSelect != 0) {
var oItem:Object = TileListdp[iCurSelect];
TileListdp.addItemAt(oItem, iCurSelect - 1);
TileListdp.removeItemAt(iCurSelect + 1);
tlList.callLater(setSelection, [iCurSelect - 1]);
private function onDownClick(event:Event):void {
var iCurSelect:int = tlList.selectedIndex;
if (iCurSelect != -1 && iCurSelect !=
TileListdp.length) {
var oItem:Object = TileListdp[iCurSelect];
TileListdp.removeItemAt(iCurSelect);
TileListdp.addItemAt(oItem, iCurSelect + 1);
tlList.callLater(setSelection, [iCurSelect + 1]);
private function setSelection(iSelect:int):void {
tlList.selectedIndex = iSelect;
tlList.scrollToIndex(iSelect);
]]>
</mx:Script>
<mx:TileList
id="tlList"
dataProvider="{TileListdp}"
maxColumns="2"
height="200"
width="200" >
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="100%">
<mx:Label width="100" text="{data.label}"/>
<mx:Label width="100" text="{data.data}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
<mx:Button label="Move Up" click="onUpClick(event)" />
<mx:Button label="Move Down" click="onDownClick(event)"
/>
</mx:Application>

Answer 1

I cannot figure out how to move items in a TileList with
ActionScript. In the sample, when you run it, the moves work if the
item where the selected item will be moved is being displayed, then
it works as expected, but if you scroll down, and then move an item
up to a spot that is not currently displayed, then the item is not
selected, and sometimes the first item is deleted even though the 2
involved items are not near the first item.
<?xml version="1.0"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete = "initData();" >
<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.collections.*;
private var listArray:Array = new Array;
[Bindable]
public var TileListdp:ArrayCollection;
private function initData():void {
var oItem:Object;
for (var i:int = 0; i < 20; i++) {
oItem = new Object;
oItem.label = "Label" + i;
oItem.data = i;
listArray.push(oItem);
TileListdp = new ArrayCollection(listArray);
private function onUpClick(event:Event):void {
var iCurSelect:int = tlList.selectedIndex;
if (iCurSelect != -1 && iCurSelect != 0) {
var oItem:Object = TileListdp[iCurSelect];
TileListdp.addItemAt(oItem, iCurSelect - 1);
TileListdp.removeItemAt(iCurSelect + 1);
tlList.callLater(setSelection, [iCurSelect - 1]);
private function onDownClick(event:Event):void {
var iCurSelect:int = tlList.selectedIndex;
if (iCurSelect != -1 && iCurSelect !=
TileListdp.length) {
var oItem:Object = TileListdp[iCurSelect];
TileListdp.removeItemAt(iCurSelect);
TileListdp.addItemAt(oItem, iCurSelect + 1);
tlList.callLater(setSelection, [iCurSelect + 1]);
private function setSelection(iSelect:int):void {
tlList.selectedIndex = iSelect;
tlList.scrollToIndex(iSelect);
]]>
</mx:Script>
<mx:TileList
id="tlList"
dataProvider="{TileListdp}"
maxColumns="2"
height="200"
width="200" >
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="100%">
<mx:Label width="100" text="{data.label}"/>
<mx:Label width="100" text="{data.data}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
<mx:Button label="Move Up" click="onUpClick(event)" />
<mx:Button label="Move Down" click="onDownClick(event)"
/>
</mx:Application>