10 Replies Latest reply on Feb 2, 2010 4:17 PM by Flex harUI

    list drag not working any more... need help please

    cyber0897 Level 1

      hey guys.. so i basically have two lists with ids "categories" and "selectedCategories", they both get an array collection as a data provider

       

      the categories list has dragEnabled="true" and dragMoveEnabled="true"

       

      the selectedCategories has dropEnabled="true" and dragEnabled="true" and dragMoveEnabled="true"

       

       

      the dragging worked just fine the fist time i tried it out.. but for some reason it randomly stopped working... and now i cant drag anything even out of the box...

       

      any ideas? i have attached the code im using below if needed...

       

       

      imageDataForm.mxml

                <s:HGroup>
                     <mx:VBox>
                          <s:Label text="Availabe Categories" />
                          <s:List id="categories" labelField="name" 
                                    allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true"/>
                     </mx:VBox>
                     <mx:VBox>
                          <s:Label text="Selected Categories" />
                          <s:List id="selectedCategories" dropEnabled="true" />
                     </mx:VBox>
                </s:HGroup>
      

       

       

       

      tileListItemRenderer.as

       

      public function editImageData():void{
           var imageId:int = data.imageId;
           getImgData.addEventListener(ResultEvent.RESULT, getImageObject);
           getImgData.GetImageObject(imageId);
      }
      
      public function getImageObject(event:ResultEvent):void{
           
           for each(var appliedCatIds:int in event.result.CategoryIds){
                for each(var catIds:Object in outerDocument.categories){
                     if(appliedCatIds == catIds.categoryId){
                          var index:int = 0;
                          index = outerDocument.categories.getItemIndex(catIds);
                          outerDocument.appliedCategories.addItem(catIds);
                          outerDocument.categories.removeItemAt(index);
                     }
                }
           }
           
           
           
           ttlWin = 
                PopUpManager.createPopUp(outerDocument, editImageDataForm, false) as TitleWindow;
           imgData = new ImageData();
           imgData = event.result as ImageData;
           
           ttlWin["imageLastName"].text = event.result.LastName;
           ttlWin["imageWidth"].text = event.result.Width;
           ttlWin["imageHeight"].text = event.result.Height;
           ttlWin["categories"].dataProvider = outerDocument.categories;
           //ttlWin["selectedCategories"].dataProvider = outerDocument.appliedCategories;
           
           
           
           ttlWin["saveData"].addEventListener(MouseEvent.MOUSE_DOWN, saveImageData);
           
           PopUpManager.centerPopUp(ttlWin);
           
      }
      
        • 1. Re: list drag not working any more... need help please
          Flex harUI Adobe Employee

          I'm not sure what a tileListItemRenderer has to do with the problem.  Try

          creating a simpler test case in about 20 lines with just two lists.  If it

          fails, post the whole test case

          • 2. Re: list drag not working any more... need help please
            cyber0897 Level 1

            ok, i'll try doing that... the reason i posted the tileListItemRenderer is becuase in my application the user can first upload images to the server, once the images have been up loaded the user then can click on one of the images that have been uploaded, once clicked a popup shows up with all the data related to that image. i hope that makes sence...

            • 3. Re: list drag not working any more... need help please
              cyber0897 Level 1

              ok so i tried doing what you suggested.. the weird thing is when i created a new project with the exact same code, it worked like a champ... but

              when the user clicks on the image a popup gets displayed in that popup i have the following code... and i still cannot get the drag to work

              i have the following code in there

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                xmlns:s="library://ns.adobe.com/flex/spark" 
                                xmlns:mx="library://ns.adobe.com/flex/mx" width="500" height="500"
                                title="Enter Image Data" close="titleWindowClose(event)" initialize="initApp()">
                   <fx:Declarations>
                        <!-- Place non-visual elements (e.g., services, value objects) here -->
                   </fx:Declarations>
                   
                   <fx:Script>
                        <![CDATA[
                             import mx.collections.ArrayCollection;
                             import mx.core.IFlexDisplayObject;
                             import mx.events.CloseEvent;
                             import mx.managers.PopUpManager;
                             
                             private function initApp():void {
                                  categories.dataProvider = 
                                       new ArrayCollection(['Reading', 'Television', 'Movies']);
                                  selectedCategories.dataProvider = new ArrayCollection([]);
                             }
              
                             
                             
                             private function titleWindowClose(event:CloseEvent):void{
                                  PopUpManager.removePopUp(event.currentTarget as IFlexDisplayObject);
                             }
                        ]]>
                   </fx:Script>
                   
                   <s:HGroup>
                        <s:HGroup>
                             <mx:VBox>
                                  <s:Label text="Availabe Categories" />
                                  <s:List id="categories" labelField="name" 
                                            allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true"/>
                             </mx:VBox>
                             <mx:VBox>
                                  <s:Label text="Selected Categories" />
                                  <s:List id="selectedCategories" labelField="name" dropEnabled="true" />
                             </mx:VBox>
                        </s:HGroup>
                             
                        
                   </s:HGroup>
              </s:TitleWindow>
              
              • 4. Re: list drag not working any more... need help please
                Flex harUI Adobe Employee

                Your code runs fine in the recent builds.

                • 5. Re: list drag not working any more... need help please
                  cyber0897 Level 1

                  my sdk is up to date with the nightly builds... after updating to the latest nightly build, i created the new project to test the drag and drop and it worked in there...

                   

                   

                  but in my old project the same code does not work...

                   


                  i just need to create a two lists with drag and drop capabilities in the popup... is there a reason why it would work outside my popup but no in my popup?? it just seems as if the drag and drop dont work in the popup any more...

                  • 6. Re: list drag not working any more... need help please
                    Flex harUI Adobe Employee

                    I tested in a popup.  Make sure everything got rebuilt.

                    • 7. Re: list drag not working any more... need help please
                      cyber0897 Level 1

                      pretty sure everything gets rebuilt everytime... I hit the play button everytime and i think it builds the project everytime i do that...

                       

                      the weird thing is it worked the first few times i played the application... but after that i cannot move the item out of the first list...

                      • 8. Re: list drag not working any more... need help please
                        Flex harUI Adobe Employee

                        You will have to debug into it.  See what events are being dispatched and

                        compare with your working test case.

                        • 9. Re: list drag not working any more... need help please
                          cyber0897 Level 1

                          so ive done the debugging... and i cannot seem to find my error anywhere... all code seems to be correct...

                           

                          so the code and the process i have my project is

                           

                          imageHandler.mxml

                           

                          <fx:Script source="imageHandlerScript.as" />
                          
                                                   <s:BorderContainer width="100%" height="50%">
                                              <mx:TileList id="incompleteImages" dataProvider="{thumbNails}"
                                                              columnWidth="135" rowHeight="135" width="100%" height="100%" >
                                                   <mx:itemRenderer>
                                                        <fx:Component>
                                                             <mx:VBox>
                                                                  <fx:Script source="tileListItemRendererScript.as" />
                                                                  
                                                                  <mx:Image source="{data.fileLoc}" height="100" width="100" click="editImageData();" useHandCursor="true" buttonMode="true" />
                                                                  <s:Button label="Delete" click="deleteImage(data.imageId)" />
                                                             </mx:VBox>
                                                        </fx:Component>
                                                   </mx:itemRenderer>
                                              </mx:TileList>
                                         </s:BorderContainer>
                          

                           

                           

                          imageHandlerScript.as

                           

                               [Bindable] public var thumbNails:ArrayCollection = new ArrayCollection();
                          
                          
                               public function initiateGallery(event:ResultEvent):void{
                                    for each(var item:Object in event.result){
                                         thumbNails.addItem({
                                              imageId: item.ImageId,
                                              fileLoc: "/Volumes/images/thumbnails/" + item.ThumbnailFileName,
                                              fileName: item.ThumbnailFileName,
                                              tempFileName: item.TempFileName,
                                              isSearch: false
                                         });
                                    }
                               }
                          
                          
                          

                           

                           

                           

                           

                           

                          tileListItemRendererScript.as

                           

                          public function editImageData():void{
                               var imageId:int = data.imageId;
                               getImgData.addEventListener(ResultEvent.RESULT, getImageObject);
                               getImgData.GetImageObject(imageId);
                          }
                          
                          public function getImageObject(event:ResultEvent):void{
                          
                               ttlWin = 
                                    PopUpManager.createPopUp(outerDocument, editImageDataForm, false) as TitleWindow;
                               imgData = new ImageData();
                               imgData = event.result as ImageData;
                               
                               ttlWin["imageId"].text = event.result.ImageId;
                               ttlWin["fileName"].text = data.fileName;
                               ttlWin["imageTitle"].text = event.result.Title;
                               ttlWin["imageDescription"].text = event.result.Description;
                               ttlWin["imageCaption"].text = event.result.Caption;
                               ttlWin["imageAltText"].text = event.result.AltText;
                               ttlWin["imageLocation"].text = event.result.Location;
                               ttlWin["imagePhotographer"].text = event.result.Photographer;
                               ttlWin["imageFirstName"].text = event.result.FirstName;
                               ttlWin["imageLastName"].text = event.result.LastName;
                               ttlWin["imageWidth"].text = event.result.Width;
                               ttlWin["imageHeight"].text = event.result.Height;
                               ttlWin["categories"].dataProvider = outerDocument.categories;
                               ttlWin["selectedCats"].dataProvider = outerDocument.appliedCategories;
                               
                               
                               
                               ttlWin["saveData"].addEventListener(MouseEvent.MOUSE_DOWN, saveImageData);
                               
                               PopUpManager.centerPopUp(ttlWin);
                               
                          }
                          

                           

                           

                           

                           

                           

                          editImageDataForm.mxml

                           

                          <?xml version="1.0" encoding="utf-8"?>
                          <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                            xmlns:s="library://ns.adobe.com/flex/spark" 
                                            xmlns:mx="library://ns.adobe.com/flex/mx" width="700" height="700"
                                            title="Enter Image Data" close="titleWindowClose(event)">
                               <fx:Declarations>
                                    <!-- Place non-visual elements (e.g., services, value objects) here -->
                               </fx:Declarations>
                               
                               <fx:Script>
                                    <![CDATA[
                                         import mx.collections.ArrayCollection;
                                         import mx.core.IFlexDisplayObject;
                                         import mx.events.CloseEvent;
                                         import mx.managers.PopUpManager;
                          
                                         private function titleWindowClose(event:CloseEvent):void{
                                              PopUpManager.removePopUp(event.currentTarget as IFlexDisplayObject);
                                         }
                                    ]]>
                               </fx:Script>
                               
                               <s:HGroup>
                                    <mx:Form>
                                         <mx:FormItem label="ID">
                                              <s:TextInput id="imageId" enabled="false" />
                                         </mx:FormItem>
                                         <mx:FormItem label="File Name">
                                              <s:TextInput id="fileName" enabled="false" />
                                         </mx:FormItem>
                                         <mx:FormItem label="Title">
                                              <s:TextInput id="imageTitle" />
                                         </mx:FormItem>
                                         <mx:FormItem label="Description">
                                              <s:TextInput id="imageDescription" />
                                         </mx:FormItem>
                                         <mx:FormItem label="Caption">
                                              <s:TextInput id="imageCaption" />
                                         </mx:FormItem>
                                         <mx:FormItem label="Alt Text">
                                              <s:TextInput id="imageAltText" />
                                         </mx:FormItem>
                                         <mx:FormItem label="Location">
                                              <s:TextInput id="imageLocation" />
                                         </mx:FormItem>
                                         <mx:FormItem label="Photographer">
                                              <s:TextInput id="imagePhotographer" />
                                         </mx:FormItem>
                                         <mx:FormItem label="First Name">
                                              <s:TextInput id="imageFirstName" />
                                         </mx:FormItem>
                                         <mx:FormItem label="Last Name">
                                              <s:TextInput id="imageLastName" />
                                         </mx:FormItem>
                                         <mx:FormItem label="Height">
                                              <s:TextInput id="imageHeight" />
                                         </mx:FormItem>
                                         <mx:FormItem label="Width">
                                              <s:TextInput id="imageWidth" />
                                         </mx:FormItem>
                                         <mx:FormItem>
                                              <s:Button id="saveData" label="Save" />
                                         </mx:FormItem>
                                    </mx:Form>
                                    
                                    <s:VGroup>
                                         <s:HGroup>
                                              <mx:VBox>
                                                   <s:Label text="Availabe Categories" />
                                                   <s:List id="categories" labelField="name" 
                                                             allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true"/>
                                              </mx:VBox>
                                              <mx:VBox>
                                                   <s:Label text="Selected Categories" />
                                                   <s:List id="selectedCats" labelField="name" dropEnabled="true" />
                                              </mx:VBox>
                                         </s:HGroup>
                                    </s:VGroup>
                                    
                               </s:HGroup>
                          </s:TitleWindow>
                          
                          

                           

                           

                           

                           

                           

                          im sorry for including this much code in this post... but im stuck... and have no idea what the problem is...

                           

                          essencially, the user will click on the image in imageHandler.mxml and the function editImageData will be called, which will then popup a titleWindow, this code is in the tileListItemRendererScript.as

                           

                           

                          the popup code is in the editImageDataForm.mxml

                           

                           

                          what ive also done is i took the lists in editImageDataForm.mxml and moved it out of the popup... into itemRenderer.mxml and the drag and drop seems to be workign there... but the exact same code in the popup will not work... i can see that the item barely moves a millimeter but it does not work...

                           

                           


                          Thank you soo much for your help... i really appretiate it!!

                          • 10. Re: list drag not working any more... need help please
                            Flex harUI Adobe Employee

                            Please compare the event sequence to see what the differences are.  Do you

                            get mouseDown, mouseMove, dragStart, dragEnter, etc?