3 Replies Latest reply on Sep 19, 2007 1:53 PM by jfillman

    Confine Mouse to Container while mouseDown

    jfillman Level 1
      I have a canvas where several items can be dropped and rearranged via drag & drop. Once a previously dropped item is moved, I want to constrain the mouse to the droppable area while the mouse is down. What happens while dragging, is that items end up being dragged off the top, bottom, left, and right of the canvas, then the mouseUp doesn't always fire until the mouse is brought back over the canvas and clicked. How can I keep the mouse within the droppable area?
        • 1. Re: Confine Mouse to Container while mouseDown
          jfillman Level 1
          Use this as an example. Take one of the items in the list and drop them in the black Canvas. Then take the dropped item and drag it out of the Canvas to the left and then releasing the mouse. Even though you can't see the dropped item, it still is "inside" of the canvas container, with a negative X value.

          Also, can anyone explain why sometimes an item dragged from within the Canvas sometimes appears ontop of the other application elements until dropped, and other times the dragged item goes behind the application elements?

          <?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);
          trace ('dragEnter');
          }

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

          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();
          buttonX.text = selectedButton.x.toString();
          }
          }
          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 id="dropBox" width="200" backgroundColor="#393A3D" right="0" borderStyle="none" dragEnter="dragEnterHandler(event);" dragExit="dragExitHandler(event);" dragDrop="dragDropHandler(event);" top="18" height="400">
          </mx:Canvas>
          <mx:Label x="10" y="212" width="124" id="buttonX"/>
          <mx:Label x="10" y="186" text="Button X Value: "/>
          </mx:Application>
          • 2. Re: Confine Mouse to Container while mouseDown
            jfillman Level 1
            I could really use the help. Anyone??