Posted By

chrisaiv on 02/27/09


Tagged

Flex drag mxml


Versions (?)

Flex: Drag n' Drop Lists


 / Published in: MXML
 

URL: http://www.theflexshow.com/blog/index.cfm/2008/9/3/The-Flex-Show--Fifteen-Minutes-With-Flex--Episode-6--Drag-and-Drop-Lists

Quick example of how to implement a fun Drag n' Drop using Flex List Component

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3. <mx:Script>
  4. <![CDATA[
  5. import mx.collections.ArrayCollection;
  6.  
  7. [Bindable]
  8. private var listDP1:ArrayCollection = new ArrayCollection([
  9. { label: "Jeff", data: 1 },
  10. { label: "John", data: 2 },
  11. { label: "Ryan", data: 3 },
  12. ]);
  13.  
  14. [Bindable]
  15. private var listDP2: ArrayCollection = new ArrayCollection();
  16.  
  17. private function doNothing():void
  18. {
  19.  
  20. }
  21.  
  22. ]]>
  23. </mx:Script>
  24. <!--
  25. Drag n Drop Properties
  26. A. dragEnabled -> Boolean. Let's you drag out of this control
  27. B. dropEnabled -> Boolean. Lets you drop items into this control
  28. C. dragMoveEnabled -> Boolean. Let's you move (rather than copy) items from one control to another
  29. -->
  30.  
  31. <mx:HBox width="100%" height="100%">
  32. <mx:List id="list1" dataProvider="{listDP1}" width="50%"
  33. dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" />
  34. <mx:Spacer width="2" />
  35. <mx:List id="list2" dataProvider="{listDP2}" width="50%"
  36. dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" />
  37. </mx:HBox>
  38. <mx:Button label="Debug" click="doNothing()" y="200" />
  39. </mx:Application>

Report this snippet  

You need to login to post a comment.