3 Replies Latest reply on Oct 29, 2007 12:24 AM by atta707

    How do you emulate a Trash Can?

    canelon
      I'm trying to enable users to drag items from a DataGrid into an image. I think the logic I'm using is correct (for what I've seen around the net) but the <mx:Box> where the image is held is not firing the dragDrop event.

      I've created a stripped down version of what I'm trying to accomplish here:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" >

      <mx:Script>
      <![CDATA[
      import mx.events.DragEvent;
      import mx.managers.DragManager;

      private function dragEnterHandler(event:DragEvent):void {
      debug.text += "dragEnterHandler\n";
      }
      private function dragCompleteHandler(event:DragEvent):void {
      debug.text += "dragCompleteHandler\n";
      }
      private function dragExitHandler(event:DragEvent):void {
      debug.text += "dragExitHandler\n";
      }
      private function dragDropHandler(event:DragEvent):void {
      debug.text += "dragDropHandler\n";
      }
      ]]>
      </mx:Script>


      <mx:XMLList id="employees">
      <employee>
      <name>John Doe</name>
      <phone>555-555-5555</phone>
      <email>email@example.com</email>
      </employee>
      </mx:XMLList>


      <mx:DataGrid dragEnabled="true" id="myDataGrid" dataProvider="{employees}">
      <mx:columns>
      <mx:DataGridColumn dataField="name" headerText="Name"/>
      <mx:DataGridColumn dataField="phone" headerText="Phone"/>
      <mx:DataGridColumn dataField="email" headerText="Email"/>
      </mx:columns>
      </mx:DataGrid>


      <mx:Box id="dropStuffOverMe"
      dragComplete="dragCompleteHandler(event);"
      dragExit="dragExitHandler(event);"
      dragEnter="dragEnterHandler(event);"
      dragDrop="dragDropHandler(event);"
      width="100" height="100" borderStyle="solid" backgroundColor="#ff0000">
      </mx:Box>

      <mx:TextArea id="debug" text="Debug text goes here..." height="245" width="276"/>

      </mx:Application>
        • 1. Re: How do you emulate a Trash Can?
          atta707 Level 2
          Here is your new drag enter method. I'm sure you can look up in the Flex Builder all about DragManager, formats and feedback!

          private function dragEnterHandler(event:DragEvent):void {
          debug.text += "dragEnterHandler " + event.dragSource.formats + "\n";

          if (event.dragSource.hasFormat("items")) {
          var target:UIComponent = UIComponent(event.currentTarget);
          DragManager.showFeedback(DragManager.MOVE);
          DragManager.acceptDragDrop(target);
          }

          Hope this helps.

          ATTA
          • 2. Re: How do you emulate a Trash Can?
            canelon Level 1
            oh, I see...

            Even though I read the Flex Builder manual I still can't quite grasp the showFeedback() method. Never mind, I'll read more about it some day ;)

            Thanks for the help...
            • 3. Re: How do you emulate a Trash Can?
              atta707 Level 2
              noticed at nice little plus (+) icon and border around the image when you drag your rows over it? That's the idea of feedback; you want to tell you user that yes, I'll accept the rows.

              HTH.

              ATTA