5 Replies Latest reply on Jul 17, 2009 11:35 AM by Louder6Pounder

    Finding the Value of a "dropped" object

    Louder6Pounder

      Hi ....again

       

      I have a tilelist and i'm dragging items from it to a canvas. How can i attach a id to each item and then find out the item of the current item dropped into the canvas?

       

      Here is my code. 

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application      
          xmlns:mx="http://www.adobe.com/2006/mxml"
          xmlns:comp="components.*"
          width="713" height="626">
      
          <mx:Script>
              <![CDATA[
                   import classes.DragDropControl;
                  import mx.events.DragEvent;
                  import mx.containers.Box;
                  import mx.managers.DragManager;
                  import mx.core.DragSource;
                  
                  // 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:Canvas = event.currentTarget as Canvas;
      
                      dropTarget.setStyle("borderColor", 0x0080ff);
                          
                      // 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:Canvas = event.currentTarget as Canvas;                
      
                      revertBoxBorder();                
                  }      
      
                  // Helper method to revert the Box's border to a 1 pixel outline.
                  private function revertBoxBorder():void{
                     formArea.setStyle("borderColor", 0xd4d1d1);                
                  }
              ]]>
          </mx:Script>
      
           <mx:ArrayCollection id="arrTools">
              <mx:source>
                  <mx:Array>
                      <mx:Object source="assets/checkBox.jpg"
                              label="CheckBox" />
                      <mx:Object source="assets/dropDown.jpg"
                              label="DropDown" />
                      <mx:Object source="assets/text.jpg"
                              label="Text" />
                      <mx:Object source="assets/textArea.jpg"
                              label="TextArea" />
                      <mx:Object source="assets/radioButton.jpg"
                              label="RadioButton" />
                      <mx:Object source="assets/fieldSet.jpg"
                              label="FieldSet" />
                      <mx:Object source="assets/label.jpg"
                              label="Label" />
                  </mx:Array>
              </mx:source>
          </mx:ArrayCollection>
      
           <mx:Canvas x="30" y="25" width="645" height="548">
                <mx:TileList id="toolbox" 
                     x="23" y="10"
                     width="202" height="355"
                     columnWidth="100"
                     rowHeight="80"
                     dragEnabled="true"
                     dataProvider="{arrTools}"
                     itemRenderer="components.TileListItemRenderer"
                     
                     >
                </mx:TileList>
                
                <mx:Canvas id="formArea"
                     x="233" y="10" 
                     width="402" height="528"  
                     borderColor="#D4D1D1" backgroundColor="#FFFFFF"
                     borderStyle="solid" borderThickness="2"
                     dragEnter="dragEnterHandler(event)"
                     dragExit="dragExitHandler(event);"
                      >
                </mx:Canvas>
                <mx:Text x="23" y="404" text="Text" width="202" id="debug"/>
           </mx:Canvas>
           
      </mx:Application>
      

       

      Thanks

        • 1. Re: Finding the Value of a "dropped" object
          BennyBeta Level 4

          Add an id attribute to each object in the array:

           

          <mx:Object id="1" source="assets/checkBox.jpg" label="CheckBox" />

           

          Add a dragDrop handler to the canvas:

           

          <mx:Canvas...

               dragDrop="dragDropHandler(event);"

          >

           

          Add the dragDropHandler() function to the script:

           

          private function dragDropHandler( event:DragEvent ):void

          {

               var dragInitiator:IUIComponent = event.dragInitiator;

               // get the id here

               var dropId:String = TileList(dragInitiator).selectedItem['id'];

          }

           

          Let me know if that helps...

           

          Ben Edwards

          • 3. Re: Finding the Value of a "dropped" object
            Louder6Pounder Level 1

            Hi ben,

             

            Cheers for the reply again.

             

            I got this error when i dropped the item

             

             

            TypeError: Error #1009: Cannot access a property or method of a null object reference.

            at FormManager/dragDropHandler()[C:\Users\Tom\Documents\Flex Builder 3\FormManager\src\FormManager.mxml:16]

            at FormManager/__formArea_dragDrop()[C:\Users\Tom\Documents\Flex Builder 3\FormManager\src\FormManager.mxml:80]

            at flash.events::EventDispatcher/dispatchEventFunction()

            at flash.events::EventDispatcher/dispatchEvent()

            at mx.core::UIComponent/dispatchEvent()[C:\autobuild\3.2.0\frameworks\projects\framework\src \mx\core\UIComponent.as:9298]

            at mx.managers.dragClasses::DragProxy/_dispatchDragEvent()[C:\autobuild\3.2.0\frameworks\pro jects\framework\src\mx\managers\dragClasses\DragProxy.as:349]

            at mx.managers.dragClasses::DragProxy/mouseUpHandler()[C:\autobuild\3.2.0\frameworks\project s\framework\src\mx\managers\dragClasses\DragProxy.as:584]

            here is my code now:
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
            
                 <mx:Script>
                    <![CDATA[
                        import mx.events.DragEvent;
                        import mx.containers.Box;
                        import mx.managers.DragManager;
                        import mx.core.DragSource;
                        import mx.core.IUIComponent; 
                        
                        private function dragDropHandler(event:DragEvent ):void{
                                var dragInitiator:IUIComponent = event.dragInitiator;
                                // get the id here
                                var dropId:String = TileList(dragInitiator).selectedItem['id'];
                                debug.text = dropId.toString();
                           }
            
                        // 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:Canvas=event.currentTarget as Canvas;
            
                                dropTarget.setStyle("borderThickness", 5);
                                
                                // 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:Canvas=event.currentTarget as Canvas;                
            
                            revertBoxBorder();                
                        }                    
                        
                        // Helper method to revert the Box's border to a 1 pixel outline.
                        private function revertBoxBorder():void{
                            formArea.setStyle("borderThickness", 1);                
                        }
                    ]]>
                </mx:Script>
            
                <mx:ArrayCollection id="arrColl">
                    <mx:source>
                        <mx:Array>
                            <mx:Object id="textArea"
                                  source="assets/TextArea.jpg"
                                 label="TextArea" />
                            <mx:Object id="dropDown" 
                                 source="assets/DropDown.jpg"
                                label="DropDown" />
                            <mx:Object id="text"
                                 source="assets/Text.jpg"
                                label="Text" />
                        </mx:Array>
                    </mx:source>
                </mx:ArrayCollection>
            
                <mx:TileList id="toolbox"
                        dataProvider="{arrColl}"
                        itemRenderer="components.TileListItemRenderer"
                        dragEnabled="true"
                        columnWidth="100"
                        rowHeight="100"
                        width="278"
                        height="334" />
                        
                <mx:Canvas id="formArea"
                     x="310" y="0" 
                     width="426" height="510" 
                     borderStyle="solid" borderColor="#B7BABC" backgroundColor="#FFFFFF"
                     dragEnter="dragEnterHandler(event);"
                    dragExit="dragExitHandler(event);"
                    dragDrop="dragDropHandler(event);"
                     >
                </mx:Canvas>
                <mx:Text x="68" y="388" text="Text" width="163" id="debug"/>
                        
                       
            
            </mx:Application>
                
            
            • 4. Re: Finding the Value of a "dropped" object
              BennyBeta Level 4

              Name the "id" attribute of your objects to something else, like "oid".  Then it (strangely) works.

               

                              <mx:Object oid="textArea"
                                    source="assets/TextArea.jpg"
                                   label="TextArea" />
                              <mx:Object oid="dropDown"
                                   source="assets/DropDown.jpg"
                                  label="DropDown" />
                              <mx:Object oid="text"
                                   source="assets/Text.jpg"
                                  label="Text" />

               

              and...

               

                   var dropId:String = TileList(dragInitiator).selectedItem['oid'];

               

              Let me know if that helps...

               

              Ben Edwards

              • 5. Re: Finding the Value of a "dropped" object
                Louder6Pounder Level 1

                Nice one Ben cheers.  That is odd though, i don't understand why it works. 

                 

                Btw, i read your flex tut on drop and drag yesterday, i knew i saw you somewhere before. 

                 

                Cheers

                     Tom