Flex Drag Drop: Cloned Data

22. June 2009 08:06

So I worked on a project recently that required drag/drop support for list based components, however, some custom porcessing was required when the item was dropped into the new list that would make my life easier when  the time came to save the data back to the database.  My data provider is an XMLListCollection that is being given as one large chunk of data.  That data is then broken up, using E4X, into smaller chunks, each of which is the source collection for my individual list-based components.  When an item is dropped into a different component, I want to update the xml values with values from the new list.  Using some of the manual drag/drop support techniques from the livedocs proved quite useful, however, I noticed that when the user released the item into the original list-component, cloned data would appear.  Let me say that another way... if a user began to drag an item from a list over another list without releasing the mouse, and then changed their mind and dropped the original item back into their original list, I would get duplicate data.  The fix for this was incredibly simple.  Setting the dragDrop event listener to our function is the first step:

<mx:Datagrid id="grd" dragDrop="{dragDrophandler(event)}"/>

Next we want to setup our handler:

private function dragDropHandler(event:DragEvent):void

{

 if (event.dragSource.hasFormat("items"))
                  {
                      event.preventDefault();
                      event.currentTarget.hideDropFeedback(event);
                      var dropTarget:DataGrid = DataGrid(event.currentTarget);
                      var dragSource:DataGrid = DataGrid(event.dragInitiator);
                      

                      // The following conditional ensures that our dragInitiator is not the same object as our drop target

                      if(dragSource != dropTarget)
                      {
                        var itemsArray:Array = event.dragSource.dataForFormat('items') as Array;
                        var tempItem:XML = itemsArray[0] as XML;
                        

                        // we can setup any custom processing here using the tempItem attributes.

                        // tempItem.@controlValue =  7;

                        // Get the drop location in the destination.
                        var dropLoc:int = dropTarget.calculateDropIndex(event);
               
                        IList(dropTarget.dataProvider).addItemAt(tempItem, dropLoc);
                      }

 

That's it.  No more cloned data. :)

Currently rated 5.0 by 2 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Log in