Flex Air 拖拽排版 类似 ps 图层

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.events.DropdownEvent;
import mx.events.DragEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import mx.controls.Image;
[Bindable]
public var imageindexs:ArrayCollection;

[Bindable]
private var imageSource:ArrayCollection;

[Bindable]
private var imageXml:XML;

private function init():void
{
var image1:Image=new Image();
image1.source="1.jpg";
image1.x=31;
image1.y=50;
image1.width=400;
image1.height=300;
image1.id="图层1";
myCanvas.addChild(image1);

var image2:Image=new Image();
image2.source="2.jpg";
image2.x=61;
image2.y=100;
image2.width=400;
image2.height=300;
image2.id="图层2";
myCanvas.addChild(image2);

var image3:Image=new Image();
image3.source="3.jpg";
image3.x=91;
image3.y=32;
image3.width=400;
image3.height=300;
image3.id="图层3";
myCanvas.addChild(image3);

var image4:Image=new Image();
image4.source="4.jpg";
image4.x=121;
image4.y=230;
image4.width=400;
image4.height=300;
image4.id="图层4";
myCanvas.addChild(image4);
var image5:Image=new Image();
image5.source="5.jpg";
image5.x=181;
image5.y=260;
image5.width=400;
image5.height=300;
image5.id="图层5";
myCanvas.addChild(image5);
var image6:Image=new Image();
image6.source="6.jpg";
image6.x=299;
image6.y=160;
image6.width=400;
image6.height=300;
image6.id="图层6";
myCanvas.addChild(image6);
// trace(myCanvas.getChildren().length);
imageindexs=new ArrayCollection();
imageSource=new ArrayCollection();
for(var i:int=myCanvas.getChildren().length - 1; i >= 0; i--)
{
// imageindexs.addItem(i);
var tempImg:Image=Image(myCanvas.getChildAt(i));
tempImg.id="图层" + (int(i) + 1);
imageSource.addItem(tempImg);
// trace(tempImg.source);
}
}

private function addLayout(evt:DragEvent):void
{
var listItem:Object=evt.dragSource.dataForFormat("items");
var index:int=dragList.calculateDropIndex(evt);
var myimage:Image=listItem[0];
//图片对应图层
var x:int=myCanvas.getChildIndex(myimage);
trace("image's lyout:" + x);
var allLayoutNumber:int=myCanvas.getChildren().length;
if ((allLayoutNumber - x) != index && ((allLayoutNumber - x) - 1) != index)
{
//拖到最底层
if (index == 0)
{
myCanvas.addChildAt(myimage, allLayoutNumber - 1);
}
//从下往上拖
else if(x<(allLayoutNumber - index)){
myCanvas.addChildAt(myimage, allLayoutNumber - index-1);
}
//从上往下拖
else
{
trace("图片位于的位置:"+x+"------插入点的默认位置"+index+"---插入点计算位置"+(allLayoutNumber - index));
myCanvas.addChildAt(myimage, allLayoutNumber - index);
}
}
imageindexs.removeAll();
imageSource.removeAll();
for(var i:int=myCanvas.getChildren().length - 1; i >= 0; i--)
{
// imageindexs.addItem(i);
var tempImg:Image=Image(myCanvas.getChildAt(i));
tempImg.id="图层" + (int(i) + 1);
imageSource.addItem(tempImg);
}
}

private function onMouseDown(evt:MouseEvent):void
{

}
]]>
</mx:Script>
<mx:Canvas x="260" y="8" width="778" height="569" id="myCanvas" mouseDown="onMouseDown(event)">

</mx:Canvas>
<mx:List borderColor="blue" id="dragList" dragComplete="addLayout(event)" dropShadowEnabled="true" dropShadowColor="blue" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" x="8" y="8" width="250" height="733" dataProvider="{imageSource}">
<mx:itemRenderer>
<mx:Component>
<mx:Form >
<mx:FormItem direction="horizontal">
<mx:Label text="{data.id}"/>
<mx:Image source="{data.source}" width="150" height="90"/>
</mx:FormItem>
</mx:Form>
</mx:Component>
</mx:itemRenderer>
</mx:List>
</mx:WindowedApplication>