0 Replies Latest reply on Dec 28, 2006 7:32 PM by r08

    Drag Image from Canvas to List - Newbie

    r08
      Hi,

      Just started working with Flex 2 so an absolute beginner here.

      I'm trying to create a small app where one can drag an image into one of many containers. There can be 0 to many images but initially just 4 different containers.
      I've tried doing this with a canvas for each image and container while following drag examples/tutorials. Also tried using a List for the target container instead.
      I'm able to drag the image into the List but onDragDrop doesn't keep the image in their..

      Any help is appreciated...
      cheers
      Rob.
      code is as follows:

      <mx:Canvas x="10" y="265" width="170" height="120">
      <mx:Image source="@Embed(source='FI000268.JPG')" width="150" id="image3" height="101" x="10" y="10"
      mouseMove="dragIt(event, image3, 'image3'); myoffset(image3);"/>
      </mx:Canvas>

      <mx:Canvas width="280" height="280" right="10" top="10" id="topRight" backgroundColor="#000000">
      <mx:List x="10" y="10" width="260" height="260"
      dragEnter="doDragEnter(event);"
      dragExit="doDragExit(event);"
      dragOver="doDragOver(event);"
      dragDrop="doDragDrop(event);"
      dragEnabled="true" id="secondList"></mx:List>
      </mx:Canvas>

      private function dragIt(event:MouseEvent, img:Image, format:String):void {
      var dragInitiator:Image=Image(event.currentTarget);
      var ds:DragSource = new DragSource();
      ds.addData(img, format);
      var imageProxy:Image = new Image();
      imageProxy.source = globeImage;
      imageProxy.height=100;
      imageProxy.width=100;
      DragManager.doDrag(dragInitiator, ds, event, imageProxy, 0, 0, 1.00);
      }

      private function doDragEnter(event:DragEvent):void {
      var dragInitiator:List=List(event.currentTarget);
      DragManager.acceptDragDrop(dragInitiator);
      }

      private function doDragDrop(event:DragEvent):void {
      var dropTarget:List=List(event.currentTarget);
      secondList.dataProvider = [];
      doDragExit(event);
      var items:Array =event.dragSource.dataForFormat("items") as Array;
      var dropLoc:int = dropTarget.calculateDropIndex(event);
      for(var i:uint=0; i < items.length; i++)
      {
      IList(dropTarget.dataProvider).addItemAt(items , dropLoc );
      }


      }