Flex: Drag and drop, simple example

Question

Hi,

I want to implement drag&drop possibilities in my application. Here is my source code:

I added images to the container, and now want to be able to move them from element PieceContainer to element board (defined in the another class). I tried to define mouse move handler as it was shown here: http://livedocs.adobe.com/flex/3/html/help.html?content=dragdrop%5F7.html, but it doesn't do anything... Actually I don't understand how should I define drap initiator, and drop handler

public class PieceContainer extends Canvas
{
    //private var image:Image = new Image();
    private var piecesWhite:Dictionary;
    private var piecesBlack:Dictionary; 
    private var images:ArrayCollection = new ArrayCollection();
    private var placeX:Number;

    public var items:Dictionary;

    public function PieceContainer()
    {
     super();
     this.addEventListener(Event.ADDED_TO_STAGE, displayPiece);
    }

    private function displayPiece(event:Event):void
    {
     placePiecesDict(new Point(0, 0), items);
    }

    private function placePiecesDict(start:Point, dict:Dictionary):void
    {
     placeX = 0;
     for (var item:* in dict)
    {

      var image:Image = new Image();
          image.source = dict[item];
          image.x = placeX/1.4;
          image.y = start.y;
          image.addEventListener(MouseEvent.MOUSE_MOVE, doDrag);
          images.addItem(image);
             this.addChild(image);
      placeX += height; 
      }
     }


     private function doDrag(evt:Event):void
     {
      trace(evt);
     }
    }

Please also see attached image for some more description: http://img.skitch.com/20091221-e6j8d62y9iin621hmcdbssrp6d.png

---

I reorganized code this way:

public class PieceContainer extends Canvas
{

    private var piecesWhite:Dictionary;
    private var piecesBlack:Dictionary; 
    private var images:ArrayCollection = new ArrayCollection();
    private var placeX:Number; 
    public var items:Dictionary;

    public function PieceContainer()
    {
     super();
     this.addEventListener(Event.ADDED_TO_STAGE, displayPiece);
    }

    private function displayPiece(event:Event):void
    {
     placePiecesDict(new Point(0, 0), items);
    }

    private function placePiecesDict(start:Point, dict:Dictionary):void
    {
     placeX = 0;
     for (var item:* in dict)
     {

      var image:Image = new Image();
                  image.source = dict[item];
                  image.x = placeX/1.4;
           image.y = start.y;
           image.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
      images.addItem(image);
      this.addChild(image);
      placeX += height; 
     }
     }


    private function mouseMoveHandler(evt:MouseEvent):void
    {

     var dragInitiator:Image =  Image(evt.currentTarget);
     var ds:DragSource = new DragSource();
     ds.addData(dragInitiator, "img");
     DragManager.doDrag(dragInitiator, ds, evt);
    }

And also added drag and drop handlers to the board:

public class BoardCell extends Canvas
{

 private var _color:Number;

 public function BoardCell()
 {
  super();
  this.addEventListener(DragEvent.DRAG_ENTER, dragEnterHanler);
  this.addEventListener(DragEvent.DRAG_DROP, dragDropHandler);
 }

 public function placeMe(x:int, y:int, width:Number, color:Number):void
 {
  graphics.lineStyle(1, 0x000000);
  graphics.beginFill(color);
  graphics.drawRect(x, y, width, width);
  graphics.endFill(); 
 }


 private function dragEnterHanler(event:DragEvent):void
 {
  if(event.dragSource.hasFormat("img"))
  {
   DragManager.acceptDragDrop(Canvas(event.currentTarget))
  }
 }

 private function dragDropHandler(event:DragEvent):void
 {
  event.dragInitiator.x = 0;
  event.dragInitiator.y = 0;

 }

But actually have 2 problems:

First: Items are draggable, but when i add them to board they stays on in the PiecesContainer. Second: I want items to be copied, rather then just moved (but when they are on board they should be movable, not copied)

Thanks, in advance

Answer 1

first problem is easily fixed. dragMoveEnabled=true is how you do it in a list control, but since your doing something very custom you will want to look back at the drag initiator and delete the drug item from it. Details here: http://livedocs.adobe.com/flex/3/html/help.html?content=dragdrop%5F8.html

This will also help you set up your drag and drop functions so you can solve problem 2 as well.