1 Reply Latest reply on Sep 1, 2007 11:41 AM by jfillman

    Dragging item over other items

    jfillman Level 1
      I have a Canvas where I drop several textarea's. As I move the various dragged items around, they either drag over or drag under the other previously dropped items. The last drop item drags over all the previously dropped items. The earlier dropped items dissapear underneath. The question is, how do I make the item I am dragging always display on top of the other items?

      Here is a quick example. Drag and drop two items from the list to the canvas. Then drag both items around. The second item that you drag and drop will always overlay the first item when dragged. The first item will always appear underneath. This is a problem because if you have a mouse up eventlistener on the first item, it will be called, but won't properly execute the function, at least in regards to updating the display and sizing of the dragged item (size, width, backgroundColor, etc). I believe it's a bug.


      <?xml version="1.0"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="620" borderStyle="solid" creationComplete="initApp();">

      <mx:Script>
      <![CDATA[
      import mx.controls.Button;
      import mx.controls.Alert;
      import mx.events.DragEvent;
      import mx.controls.List;
      import mx.managers.DragManager;
      import mx.core.DragSource;

      private function initApp():void {
      var dp:Array = ([
      {label:"First", data:"25"},
      {label:"Second", data:"50"},
      ]);
      listOne.dataProvider = dp;
      }

      private function dragEnterHandler(event:DragEvent):void {
      var dropTarget:Canvas=event.currentTarget as Canvas;
      dropTarget.setStyle("borderThickness", 5);
      DragManager.acceptDragDrop(dropTarget);
      }

      private function dragExitHandler(event:DragEvent):void {
      var dropTarget:Canvas=event.currentTarget as Canvas;
      revertBoxBorder();
      }

      public function dragDropHandler(event:DragEvent):void {
      var dropTarget:Canvas=event.currentTarget as Canvas;
      var buttonA:Button = new Button;
      buttonA.label=listOne.selectedItem.label;
      buttonA.height=listOne.selectedItem.data;
      buttonA.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
      buttonA.addEventListener(MouseEvent.MOUSE_UP, mouseUp);

      if (event.stageY.valueOf() >= 10 && event.stageY.valueOf() < 110) {
      buttonA.x = 0;
      buttonA.y = 0;
      }
      else{
      if (event.stageY.valueOf() >= 110 && event.stageY.valueOf() < 210) {
      buttonA.x = 0;
      buttonA.y = 110;
      buttonA.width = 150;
      }
      }
      dropBox.addChild(buttonA);
      revertBoxBorder();
      }

      public function mouseDown(event:MouseEvent):void {
      if (event.target is Button) {
      var selectedButton:Button = event.target as Button;
      event.target.startDrag();
      selectedButton.focusEnabled = true;
      selectedButton.setFocus();
      }
      }

      public function mouseUp(event:MouseEvent):void {
      var selectedButton:Button = event.target as Button;
      if (event.target is Button) {
      event.target.stopDrag();
      }
      }
      private function revertBoxBorder():void {
      dropBox.setStyle("borderThickness", 1);
      }

      ]]>
      </mx:Script>
      <mx:List id="listOne" dragEnabled="true" dropEnabled="false" x="10" y="10"></mx:List>
      <mx:Canvas x="190" y="10" width="308" height="200" borderStyle="solid" borderColor="#000000" backgroundColor="#FFFFFF"
      dragEnter="dragEnterHandler(event);" id="dropBox" dragExit="dragExitHandler(event);"
      dragDrop="dragDropHandler(event);">
      </mx:Canvas>
      </mx:Application>