<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            public var AC1 : ArrayCollection = new ArrayCollection([
                {id: 2, text: "One"} ,
                {id: 3, text: "Two"},
                {id: 4, text: "Three"}
            ]);

            [Bindable]
            public var AC2 : ArrayCollection = new ArrayCollection([
                {id: 4, text: "Four"} ,
                {id: 5, text: "Five"},
                {id: 6, text: "Six"}
            
            ]);

            [Bindable]
            public var AC3 : ArrayCollection = new ArrayCollection([
                {id: 7, text: "Seven"} ,
                {id: 8, text: "Eight"},
                {id: 9, text: "Nine"}
            ]);


            [Bindable]
            public var AC4 : ArrayCollection = new ArrayCollection([
                {id: 10, text: "Ten"} ,
                {id: 11, text: "Eleven"},
                {id: 12, text: "Twelve"}
            ]);


            [Bindable]
            public var AC5 : ArrayCollection = new ArrayCollection([
                {id: 13, text: "Thirteen"} ,
                {id: 14, text: "Fourteen"},
                {id: 15, text: "Fifteen"}
            ]);

            [Bindable]
            public var AC6 : ArrayCollection = new ArrayCollection([
                {id: 16, text: "Sixteen"} ,
                {id: 17, text: "Seventeen"},
                {id: 18, text: "Eighteen"}
            ]);

            [Bindable]
            public var AC7 : ArrayCollection = new ArrayCollection([
                {id: 19, text: "Nineteen"} ,
                {id: 20, text: "Twenty"},
                {id: 21, text: "Twenty-one"}
            ]);


            [Bindable]
            public var AC8 : ArrayCollection = new ArrayCollection([
                {id: 22, text: "Twenty-two"} ,
                {id: 23, text: "Twenty-three"},
                {id: 24, text: "Twenty-four"}
            ]);

        ]]>
    </mx:Script>

    <mx:HBox>
            
        <mx:List dataProvider="{this.AC1}" id="List0" height="100%" 
            dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"     >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Label text="{data.text}" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:List> 
        <mx:Spacer width="100"/>
        <mx:List dataProvider="{this.AC2}" id="List1" height="100%" 
            dragEnabled="true" dropEnabled="true" dragMoveEnabled="false" >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Label text="{data.text}" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:List> 
        <mx:Spacer width="100"/>
        <mx:List dataProvider="{this.AC3}" id="List2" height="100%" 
            dragEnabled="true" dropEnabled="false" dragMoveEnabled="true" >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Label text="{data.text}" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:List> 
        <mx:Spacer width="100"/>
        <mx:List dataProvider="{this.AC4}" id="List3" height="100%" 
            dragEnabled="true" dropEnabled="false" dragMoveEnabled="false" >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Label text="{data.text}" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:List> 

        <mx:Spacer width="100"/>
        
        <mx:List dataProvider="{this.AC6}" id="List4" height="100%" 
            dragEnabled="false" dropEnabled="true" dragMoveEnabled="true"     >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Label text="{data.text}" />
                </mx:Component>
            </mx:itemRenderer>
            
        </mx:List> 
        <mx:Spacer width="100"/>
        <mx:List dataProvider="{this.AC7}" id="List5" height="100%" 
            dragEnabled="false" dropEnabled="true" dragMoveEnabled="false" >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Label text="{data.text}" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:List> 
        <mx:Spacer width="100"/>
        <mx:List dataProvider="{this.AC7}" id="List6" height="100%" 
            dragEnabled="false" dropEnabled="false" dragMoveEnabled="true" >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Label text="{data.text}" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:List> 
        <mx:Spacer width="100"/>
        <mx:List dataProvider="{this.AC8}" id="List7" height="100%" 
            dragEnabled="false" dropEnabled="false" dragMoveEnabled="false" >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Label text="{data.text}" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:List> 
    </mx:HBox>
    
</mx:Application>