2 Replies Latest reply on Jan 28, 2008 11:50 AM by Solerous

    dragExitHandler error

    Solerous Level 1
      I am trying to implement drag and drop in flex. I originally had everything working by following this tutorial:

      http://www.adobe.com/devnet/flex/quickstart/adding_drag_and_drop/

      But now, when I drag the item, the dragExitHandler gets triggered unless I am on the BORDER of a Box container. Does anyone know how to fix this?
        • 1. dragExitHandler error
          Solerous Level 1
          Here is the code I'm using. I really didn't change anything from the tutorial which is why I find it odd that this doesn't work except when you drag onto the actual border. The only thing I can think of is that the drag and drop in the Adobe example is within the same container and I am attempting to drop an item from one panel into the HBox of another Panel...


          public function dragIt(event:MouseEvent, value:uint):void {
          // Get the drag initiator component from the event object.
          var dragInitiator:Button = event.currentTarget as Button;

          // Create a DragSource object.
          var dragSource:DragSource = new DragSource();
          // Add the data to the object.

          dragSource.addData(value, 'value');

          // Create a copy of the button to use as a drag proxy.
          var dragProxy:Button = new Button();
          dragProxy.label = dragInitiator.label;
          dragProxy.styleName = dragInitiator.styleName;
          dragProxy.width = dragInitiator.width;

          // Call the DragManager doDrag() method to start the drag.
          DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
          }

          // Called if the user drags a drag proxy onto the drop target.
          private function dragEnterHandler(event:DragEvent):void {

          // Get the drop target component from the event object.
          var dropTarget:HBox = event.currentTarget as HBox;

          // Accept the drag only if the user is dragging data
          // identified by the 'value' format value.
          if (event.dragSource.hasFormat('value'))
          {
          // Make the border of the Box thicker to
          // visually signal to the user that they can
          // drop the coin there.
          dropTarget.setStyle("borderThickness", 3);
          dropTarget.setStyle("borderColor", "#000000");

          // Accept the drop.
          DragManager.acceptDragDrop(dropTarget);
          }
          }

          // Called if the user drags the drag proxy away from the drop target.
          private function dragExitHandler(event:DragEvent):void {
          // Get the drop target component from the event object.
          var dropTarget:HBox = event.currentTarget as HBox;

          // Set the border of the Box to its default value
          // to visually indicate that the user is no longer
          // over the drop target.

          // revertBoxBorder();
          dropTarget.setStyle("borderThickness", 1);
          dropTarget.setStyle("borderColor", "#cccccc");
          }

          // Called if the target accepts the dragged object and the user
          // releases the mouse button while over the drop target.
          private function dragDropHandler(event:DragEvent):void {
          // Get the data identified by the color format from the drag source.
          var value:uint = event.dragSource.dataForFormat('value') as uint;

          // Set the border of the Box to its default value
          var dropTarget:HBox = event.currentTarget as HBox;
          funcMsg.setVisible(true);
          funcInstruct.setVisible(false);
          // Set the border of the Box to its default value
          // to visually indicate that the user is no longer
          // over the drop target.
          dropTarget.setStyle("borderThickness", 1);
          dropTarget.setStyle("borderColor", "#cccccc");
          }


          <mx:HBox height="40" width="40"
          dragDrop="dragDropHandler(event)"
          dragEnter="dragEnterHandler(event)"
          dragExit="dragExitHandler(event)"
          borderColor="#cccccc"
          verticalAlign="middle" horizontalAlign="center"
          cornerRadius="15" borderStyle="solid"/>
          • 2. Re: dragExitHandler error
            Solerous Level 1
            Ok, I finally figured out the answer from the Flex Developer's guide!

            I needed to set the background color of the HBox...

            Here's an excerpt from the guide:

            "To use a container as a drop target, you must use the backgroundColor property of the container to set a color. Otherwise, the background color of the container is transparent, and the Drag and Drop Manager is unable to detect that the mouse pointer is on a possible drop target."