2009-12-21 146 views
0

我想在我的應用程序中實現拖動&拖放的可能性。這裏是我的源代碼:Flex:拖放,簡單示例

我將圖像添加到容器,現在想要能夠將它們從元素PieceContainer移動到元素板(在另一個類中定義)。我試圖定義鼠標移動處理程序,因爲它是如下所示:http://livedocs.adobe.com/flex/3/html/help.html?content=dragdrop_7.html,但它不會做任何事情......其實我也不知道我應該如何定義DRAP引發劑,滴處理

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); 
     } 
    } 

也請見所附圖片爲一些描述: http://img.skitch.com/20091221-e6j8d62y9iin621hmcdbssrp6d.png


我重組代碼是這樣的:

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); 
    } 

並且還添加拖放處理板:

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; 

    } 

但實際上有2個問題:

第一:項目可以拖動,但是當我將它們添加到登上他們在PiecesContainer巋然不動。 二:我要項目被複制,而並非只是移動(但是當他們在船上,他們應該是可移動的,不可複製)

感謝,提前

回答