Dragging and Dropping Between Lists Part 3: Showing The Code
This is the third part of a series about dragging and dropping between lists. You can read part 1, where I spoke about properties related to dragging and dropping. In part 2, I covered events. In this one, I'm going to ditch with the theory and show you some code.
There are 3 properties that need to be set to enable dragging and dropping. dragEnabled specifies whether an item can be copied from one list to another. DragMoveEnabled specifies whether the item can be moved in addition to copying. DropEnabled says that the current list can allow for items to be dropped on it. EAch property accepts a value of either true or false, leaving a total of eight possible configurations for drag and drop. I'm going to implement all 8 possible options.
First, I'm going to create 8 data providers:
<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>
Eight options, so that creates 8 different data provider. Now we need 8 different lists. Here is the first:
<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>
The first one has dragEnabled set to true, dropenabled to true, and dragMoveEnabled to true. This means that you can copy or move items from this list, and also bring new items into the list.
<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>
The second one changes dragMoveEnabled to false. This means you can copy items from this list, but cannot move them. Anything can be brought into the list.
<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>
The third list sets drop enabled to false. That means you can't drop items onto the list. However, you can copy or move items to any other list that has dropEnabled to true.
<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>
This fourth list modifies the previous one by changing dragMoveEnabled to false. That means items can be copied from this but cannot be moved from the list. Next we go through the first four options, with "dragEnabled" set to false. I'm not going to show the code for each of the 4 options, because the end results are pretty much the same. If you can't drag items away from the list, then dragMoveEnabled has no affect, thus only leaving dropEnabled the only property that matters. Here is code for each variation with dragEnabled=false:
<mx:List dataProvider="{this.AC5}" 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:List dataProvider="{this.A7}" 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>
In List4 you can drop items onto it. In list6 you can't. It seems odd that there is no way to "move" an item without also having "copy" enabled. Perhaps we need to have Adobe add a "dragCopyEnabled' property or some other solution.
You can view the full source code here, or the compiled swf here
A question for my readers. Do my readers like these "more expansive" series split into multiple posts, or would you rather shorter self contained posts?
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]