11 Replies Latest reply on Jun 17, 2010 12:26 PM by VRPDeveloper

    Urgent : Drag Drop Functionality

    Arsohoh Level 1

      Hi All,

       

      I have a datagrid with the drag drop enabled. My requirement is that when I drag the items I shouldn't see the dragged item ( the entire dragged row as such ) but by default Flex has the functionality which shows the entire dragged rows content on mouse move. Please help me out like how can i make thie entire row's visibility to false when i move the mouse with the selected item in the Datagrid

        • 1. Re: Urgent : Drag Drop Functionality
          VijiNaga

          When you perform drag and drop, you doesnt want to see the item which is getting dragged. Then don't specify the proxy (it can be image, data) which reflects while dragging.

           

          On mouse move handler of the dragging object you will specify DragSource

           

          For ex:

           

          private

           

           

          function doDragOperation(evt:MouseEvent):void

          {

           

           

          var img:Image = evt.currentTarget as Image;

           

           

          var temp:Image = new Image();

          temp.source = no_icon

          temp.width = 1;

          temp.height = 1;

           

           

          var dsource:DragSource = new DragSource();

          dsource.addData(temp,

          'img');

           

          DragManager.doDrag(img, dsource, evt,temp);

          }

           

          Message was edited by: VijiNaga

          • 2. Re: Urgent : Drag Drop Functionality
            pradeep reddy Level 1

            Hi Arsohoh,

             

             

            Your question is not clear to me..!    While dargging you will get an icon along with cursor u want to remove that or else when you do drag you want to remove that item from the DATA GRID.. perminently?

             

             

            Thanks,

            Pradeep

            • 3. Re: Urgent : Drag Drop Functionality
              Arsohoh Level 1

              Thanks for your reply.

               

              I have already tried with the image stuff and its working fine for me. But the issue is that, when I try to drag a row in the Datagrid, I get to see the dragged item which I don't need.I know its weird but its the requirement.

               

              Please find attached the screenshots for your reference.

               

              Before Dragging :

               

              BeforeDragging.JPG

                  On Drag,

              OnDragging.JPG

              • 4. Re: Urgent : Drag Drop Functionality
                Arsohoh Level 1

                Thanks for your reply.

                 

                I have already tried with the image stuff and its working fine for me. But the issue is that, when I try to drag a row in the Datagrid, I get to see the dragged item which I don't need.I know its weird but its the requirement.

                 

                Please find attached the screenshots for your reference.

                 

                Before Dragging :

                 

                BeforeDragging.JPG

                    On Drag,

                OnDragging.JPG

                • 5. Re: Urgent : Drag Drop Functionality
                  Arsohoh Level 1

                  Any Suggestions on this .

                  • 6. Re: Urgent : Drag Drop Functionality
                    $Nith$ Level 4

                    did you try to disable the liveScrolling property?

                     

                    i.e   <mx:DataGrid liveScrolling='false'/>

                     

                     

                    Nith

                    • 7. Re: Urgent : Drag Drop Functionality
                      Matt Le Fevre Level 4

                      Arsohoh wrote:

                       

                      Any Suggestions on this .

                       

                      something like this?

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                          
                          <mx:XML id="xmlDATA" xmlns="">
                              <root>
                                  <item>
                                      <name>Item 1</name>
                                      <data>3495634895</data>
                                  </item>
                                  <item>
                                      <name>Item 2</name>
                                      <data>345354</data>
                                  </item>
                                  <item>
                                      <name>Item 3</name>
                                      <data>345</data>
                                  </item>
                                  <item>
                                      <name>Item 4</name>
                                      <data>13573a</data>
                                  </item>
                                  <item>
                                      <name>Item 5</name>
                                      <data>4572</data>
                                  </item>
                              </root>
                          </mx:XML>
                          
                          <mx:Script>
                              <![CDATA[
                                  import mx.events.DragEvent;
                              
                                  public var tempObject:Object;
                                  
                                  private function onDrag():void{
                                      tempObject = dg1.selectedItem
                                      dg1.dataProvider.removeItemAt(dg1.selectedIndex);
                                  }
                                  
                                  private function onDrop(event:DragEvent):void{
                                      dg1.dataProvider.addItemAt(tempObject, dg1.calculateDropIndex());
                                  }
                              ]]>
                          </mx:Script>
                          
                          <mx:DataGrid id="dg1" x="150" y="266" dataProvider="{xmlDATA.item}" dragComplete="onDrop(event)" dragStart="onDrag()" dragEnabled="true" dropEnabled="true" width="380" height="233">
                              <mx:columns>
                                  <mx:DataGridColumn headerText="Column 1" dataField="name"/>
                                  <mx:DataGridColumn headerText="Column 2" dataField="data"/>
                              </mx:columns>
                          </mx:DataGrid>
                          
                      </mx:Application>
                      
                      1 person found this helpful
                      • 8. Re: Urgent : Drag Drop Functionality
                        Arsohoh Level 1

                        Thanks for your reply.

                         

                        Correct me if am wrong, i think this property doesn't help out. But still I tried it, its not working as expected.

                        • 9. Re: Urgent : Drag Drop Functionality
                          Matt Le Fevre Level 4

                          Its just an example of one of the ways you could go about it.

                           

                          It removes the item your dragging from the dataprovider (and hence, makes it invisible). It copies it to a temp object file so the data isn't lost and then placed correctly depending on your mouse positioning.

                           

                           

                           

                          I imagine you could also try setting the selected item's visible property to false whilst it is being dragged, there are multiple ways to go about doing this depending on the rest of the code you have written.

                           

                           

                          just for clarification, which row do you want to be made invisible, the original, or the one generated by the drag handler?

                          • 10. Re: Urgent : Drag Drop Functionality
                            Arsohoh Level 1

                            Thanks for your reply.

                             

                            I need to have the row one generated by the drag handler to be invisible.

                            • 11. Re: Urgent : Drag Drop Functionality
                              VRPDeveloper Level 3

                              Specify blank image in drag proxy.... I mean white image then I guess it will not show the entire row....Hope this will work