6 Replies Latest reply on Apr 9, 2009 7:25 AM by thebouv

    Next newbie fun - drag and drop

      Well after a very successful last posting - here goes again .... I'm trying to get the dragged images to appear in the box. But for some reason they're not appearing. As you can tell - I is still a newbie!

       

      Thanks

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
          <mx:Script>
              <![CDATA[
              import mx.controls.Image;  
              import mx.managers.DragManager;
              import mx.core.DragSource;

       

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

       

                  // Create a DragSource object - stores info about the drag data
                  var dragSource:DragSource = new DragSource();

       

                  // Add the data to the object.
                  dragSource.addData(value, 'value');

       

                  // Create a copy of the coin image to use as a drag proxy.
                  var dragProxy:Image = new Image();
                  dragProxy.source = event.currentTarget.source;

       

                  // Call the DragManager doDrag() method to start the drag.
                  DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
              }
             
                 private function preLetGo(event:MouseEvent):void
                 {              
                     // Get the drop target component from the event object.
                     var dropTarget:VBox = event.currentTarget as VBox;
                 
                  // Accept it
                  DragManager.acceptDragDrop(dropTarget);
                 }
             
              // Build new array based on what gets dragged over it
              private function letGo(event:MouseEvent):void
              {
                  var images:Array = [];
                  var newImage:Image = new Image();
                  newImage.source = event.currentTarget.source;
                  images.push({img:newImage}); 
                  content.dataProvider = images;
              }
              ]]>
          </mx:Script>
         
          <mx:VBox>
              <mx:Image source="images/image1.jpg" mouseDown="dragIt(event,1);" />
              <mx:Image source="images/image2.jpg" mouseDown="dragIt(event,2);" />   
          </mx:VBox>

       

          <mx:VBox width="400" height="200" id="vbox" backgroundColor="#c0c0c0">
              <mx:Label text="Drop here" />
              <mx:List id="content" dragEnter="preLetGo(event);" dragDrop="letGo(event);" labelField="images" />
          </mx:VBox>

       

      </mx:Application>

        • 1. Re: Next newbie fun - drag and drop
          K-kOo Level 1

          I think your are missing the dropEnabled flag to your List.

          You need to set to true before anything else if you want to use it as a drop zone.

           

          <mx:List dropEnabled="true"/>
          

           

          Good luck

          • 2. Re: Next newbie fun - drag and drop
            thebouv Level 2

            K-kOo, the List is not the target of the drag and drop, I believe UKuser27 wants the images to show up in the VBox, and for the list to be a tally of which images are now in the VBox.

             

            I could be wrong, but his AS is setting DragManager.acceptDragDrop(VBox(event.currentTarget)).

             

            UKuser27, with my assumptions above, I've redone your app to act as so.  Much like in Adobe's example at http://livedocs.adobe.com/flex/3/html/help.html?content=dragdrop_7.html you have to adjust the image's whereabouts.  In their example, they're moving an object already inside a Canvas, so they use the handler to update the xy coords.  In your case, you need to remove the image from the first VBox, and add it to the second one.  It will then show up under the List element (though I'm not sure why you'd want that).

             

            Here is my interpretation of what you wanted.  Even if it is not exactly what you want, should give you the right direction to move forward with:

             

            <?xml version="1.0"?>
            <!-- dragdrop\DandDImage.mxml -->
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            
                <mx:Script>
                    <![CDATA[
                        //Import classes so you don't have to use full names.
                        import mx.managers.DragManager;
                        import mx.core.DragSource;
                        import mx.events.DragEvent;
                        import flash.events.MouseEvent;
                        import mx.controls.Alert;
            
                           private var imageList:Array = [];
            
                        // The mouseMove event handler for the Image control
                        // initiates the drag-and-drop operation.
                        private function mouseMoveHandler(event:MouseEvent):void {                
                            var dragInitiator:Image=Image(event.currentTarget);
                            var ds:DragSource = new DragSource();
                            ds.addData(dragInitiator, "img");               
            
                            DragManager.doDrag(dragInitiator, ds, event);
                        }
                        
                        // The dragEnter event handler for the VBox container
                        // enables dropping.
                        private function dragEnterHandler(event:DragEvent):void {
                            if (event.dragSource.hasFormat("img")) {
                                DragManager.acceptDragDrop(VBox(event.currentTarget));
                            }
                        }
            
                        // The dragDrop event handler for the VBox container
                        // adds image to the target VBox
                        private function dragDropHandler(event:DragEvent):void {
                             vbox.addChild(Image(event.dragInitiator));
                             // now update the List
                             imageList.push(Image(event.dragInitiator).source);
                             content.dataProvider = imageList;
                        }
                    ]]>
                </mx:Script>
                
                <mx:VBox id="imgbox">
                  <mx:Image id="myimg1" source="thebouv_bigger.gif" mouseMove="mouseMoveHandler(event);"/> 
                  <mx:Image id="myimg2" source="thebouv_bigger.gif" mouseMove="mouseMoveHandler(event);"/> 
                </mx:VBox>
            
                <mx:VBox width="400" height="200" 
                     id="vbox" 
                     backgroundColor="#c0c0c0"
                     dragEnter="dragEnterHandler(event)" 
                    dragDrop="dragDropHandler(event)">
                    
                    <mx:Label text="Drop here" />
                    <mx:List id="content" dropEnabled="true"/>
                </mx:VBox>
                
            </mx:Application>
            
            
            1 person found this helpful
            • 3. Re: Next newbie fun - drag and drop
              Level 1

              Thanks for your answers! They are certainly pointing me in the right direction. Thanks again.

              • 4. Re: Next newbie fun - drag and drop
                thebouv Level 2

                If my assumptions about your program were not correct, if you can clarify I can try to match my code to exactly what you're trying to do.

                 

                But if my code above points you in the right direction, awesome!  Let me know if I can help in any other way.

                • 5. Re: Next newbie fun - drag and drop
                  Level 1

                  Hi,

                   

                  Thanks for responding. Unfortunately I've not been able to play with the code properly and tie them in. What I'm ultimately trying to achieve is:

                   

                  1) You drag the images into a box (but currently I'm getting a white box inside the container)

                  2) A copy of the image is left where it is (a Proxy image)

                  3) A cumulative total relating (a price) to each image

                   

                  Feel free to play with the code, but I'm afraid I won't be responding for a while as this is work stuff. If not, I'll pick it back up when I come back.

                   

                  Thanks again.

                   

                  A

                  • 6. Re: Next newbie fun - drag and drop
                    thebouv Level 2

                    Mostly my confusion is what is the List for, and are trying to drag images into the List or just into the VBox?  If it is the VBox, why is the List in the VBox too -- because then the images show up under the List.

                     

                    Sounds like you're trying to make a drag n' drop shopping-cart-type thing right?

                     

                    I don't mind playing with the code a bit cause I'm bored and Flex is fun.  ;-)