I am trying to add an additional step to dragdrop handler when I move an item from a list control to the other. In my program, there are three ranked list controls, the first is "above threshold", second "under threshold", the third "extra". I could easily move items in between these three. But I'd like to limit the number of "above threshold" to at most 10 items. So if I move an item from "extra" list to the 7th place of "above threshold", 7-th, 8-th, and 9-th item is moving below one step and the last 10-th item should slip to top of the "unde threshold". To do this, I have to run the default "drag drop" action first and add the above step later in the function. Here is a snippet of my code.
<mx:List width="100%" height="100%"
dragEnabled="true" dropEnabled="true" allowMultipleSelection="true" dragDrop="dragDropHandler(event);"
dragMoveEnabled="true" id="aboveThreshold" dataProvider="{list1}" horizontalScrollPolicy="on" doubleClickEnabled="true" mx:List>
<mx:List width="100%" height="100%"
dragEnabled="true" dropEnabled="true" allowMultipleSelection="true" dragDrop="dragDropHandler(event);"
dragMoveEnabled="true" id="underThreshold" dataProvider="{list2}" horizontalScrollPolicy="on" doubleClickEnabled="true" mx:List>
<mx:List width="100%" height="100%"
dragEnabled="true" dropEnabled="true" allowMultipleSelection="true" dragDrop="dragDropHandler(event);"
dragMoveEnabled="true" id="extra" dataProvider="{list3}" horizontalScrollPolicy="on" doubleClickEnabled="true" mx:List>
private function dragDropHandler(eventragEvent):void {
var j:Number=1;
for each(var element:Object in aboveThreshold.dataProvider) {
if(element.position > 10){
underThreshold.dataProvider.addItemAt(element,j-1);
aboveThreshold.dataProvider.removeItemAt(10);
}
j++;
}
for each(var element:Object in underThreshold.dataProvider) {
if(element.position <= 10){
aboveThreshold.dataProvider.addItem(element);
underThreshold.dataProvider.removeItemAt(0);
}
}
...
}
dragEnabled="true" dropEnabled="true" allowMultipleSelection="true" dragDrop="dragDropHandler(event);"
dragMoveEnabled="true" id="aboveThreshold" dataProvider="{list1}" horizontalScrollPolicy="on" doubleClickEnabled="true" mx:List>
<mx:List width="100%" height="100%"
dragEnabled="true" dropEnabled="true" allowMultipleSelection="true" dragDrop="dragDropHandler(event);"
dragMoveEnabled="true" id="underThreshold" dataProvider="{list2}" horizontalScrollPolicy="on" doubleClickEnabled="true" mx:List>
<mx:List width="100%" height="100%"
dragEnabled="true" dropEnabled="true" allowMultipleSelection="true" dragDrop="dragDropHandler(event);"
dragMoveEnabled="true" id="extra" dataProvider="{list3}" horizontalScrollPolicy="on" doubleClickEnabled="true" mx:List>
private function dragDropHandler(eventragEvent):void {
var j:Number=1;
for each(var element:Object in aboveThreshold.dataProvider) {
if(element.position > 10){
underThreshold.dataProvider.addItemAt(element,j-1);
aboveThreshold.dataProvider.removeItemAt(10);
}
j++;
}
for each(var element:Object in underThreshold.dataProvider) {
if(element.position <= 10){
aboveThreshold.dataProvider.addItem(element);
underThreshold.dataProvider.removeItemAt(0);
}
}
...
}
But the code for dragdrop handler is not correct since the code is not run after the actual drag and drop is done. Any help is appreciated
