2 Replies Latest reply on Apr 2, 2008 4:46 PM by ntsiii

    Copy dragged data - Please help

    SemperSalvus
      I am trying to copy a dragged piece of data to an arrayCollection other than the dataProvider of the target. I have a copy of the dragSource data going into a different ac like I want to, but every time it happens, it throws the data into an index under an index of the ac I am copying to. Even more strange, is that the copies are going into these sub indexes by skipping every other one (so, the first one copied is going into index 0 of index 1 of the ac, then the next one is going into index 0 of index 3 and so on). The data is there, but is not directly under the ac like I would want, in the root indexes (why?!). This must be related to how the dragSource is bringing over a copy of the data and I cannot figure out how to copy the data correctly.

      My bottom line need is to have all the newly dragged items stored and tracked in a separate ac. The target ac may already show data in my application and I need to be able to capture the items being added so I can handle some things with them separately, instead of acting on the entire target ac which would increase overhead when updating that info to the back end tables.

      If anyone knows of a better way than trying to copy the dragged item, please put me in that direction. But, I still do not understand why the copies are getting buried in a sub index of the ac I am copying to.

      Here is a sample of some code (not my application but the behavior is exactly the same). This code is straight from the Flex Builder Help Examples, except for the addition of the code needed to try to copy a dragged/dropped item to a different ac other than the drop target. I have tried to do this copy on the drapDrop event and also on the dragComplete event, but neither works. It has to be copying only the items that actually get dropped, so dragEnter and other drag events occur before the user releases the mouse button to drop the data. I had this in an AIR app, but this can be changed from WindowedApplication to just Application to test it as a Flex project. I did not see an "Attach Code" button to add my code with, but here it is:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="initApp();" layout="vertical">

      <mx:Script>
      <![CDATA[
      import mx.managers.DragManager;
      import mx.events.DragEvent;
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;

      private function initApp():void {
      firstList.dataProvider = new ArrayCollection([
      {label:"First", data:"1"},
      {label:"Second", data:"2"},
      {label:"Third", data:"3"},
      {label:"Fourth", data:"4"}
      ]);
      secondList.dataProvider = new ArrayCollection([]);
      }

      // Variable to store original border color.
      private var tempBorderColor:uint;

      // Flag to indicate that tempBorderColor has been set.
      private var borderColorSet:Boolean = false;

      [Bindable]
      private var ac:ArrayCollection = new ArrayCollection;

      private function dragOverHandler(event:DragEvent):void {

      // Explpicitly handle the dragOver event.
      event.preventDefault();

      // Since you are explicitly handling the dragOver event,
      // call showDropFeedback(event) to have the drop target
      // display the drop indicator.
      // The drop indicator is removed
      // automatically for the list controls by the built-in
      // event handler for the dragDrop event.
      event.currentTarget.showDropFeedback(event);

      if (event.dragSource.hasFormat("items"))
      {
      // Set the border to green to indicate that
      // this is a drop target.
      // Since the dragOver event is dispatched continuosly
      // as you move over the drop target, only set it once.
      if (borderColorSet == false) {
      tempBorderColor =
      event.currentTarget.getStyle('borderColor');
      borderColorSet = true;
      }

      // Set the drag-feedback indicator based on the
      // type of drag-and-drop operation.
      event.currentTarget.setStyle('borderColor', 'green');
      if (event.ctrlKey) {
      DragManager.showFeedback(DragManager.COPY);
      return;
      }
      else if (event.shiftKey) {
      DragManager.showFeedback(DragManager.LINK);
      return;
      }
      else {
      DragManager.showFeedback(DragManager.MOVE);
      return;
      }
      }

      // Drag not allowed.
      DragManager.showFeedback(DragManager.NONE);
      }

      private function dragDropHandler(event:DragEvent):void
      {
      dragExitHandler(event);
      }

      // Restore the border color.
      private function dragExitHandler(event:DragEvent):void
      {
      event.currentTarget.setStyle('borderColor', tempBorderColor);
      borderColorSet = true;
      }

      private function dragCompleteHandler(event:DragEvent):void
      {
      ac.addItem(event.dragSource.dataForFormat("items") as Array);
      Alert.show(ac.getItemAt(0).toString());
      /* The Alert box shows [Object] [Object] */
      }

      ]]>
      </mx:Script>

      <mx:HBox id="myHB">
      <mx:List id="firstList"
      dragComplete="dragCompleteHandler(event)"
      dragEnabled="true"
      dragMoveEnabled="true"/>

      <mx:DataGrid id="secondList"
      borderThickness="2"
      dropEnabled="true"
      dragOver="dragOverHandler(event);"
      dragDrop="dragExitHandler(event);"
      dragExit="dragExitHandler(event);"/>
      </mx:HBox>

      <mx:Button id="b1"
      label="Reset"
      click="initApp()"
      />

      </mx:WindowedApplication>