Welcome, Guest. Please login or register.
Did you miss your activation email?
11 Mar 2010, 08:26:53 UTC
Forum home
+  flexdeveloper.eu Forum
|-+  Flex and ActionScript 3.0
| |-+  ActionScript 3.0 (Moderators: JMWhittaker, Jan K, thewarpedcoder, James)
| | |-+  Drag and drop
« previous next »
Pages: [1] Print
Author Topic: Drag and drop (Read 11029 times)
flexy
Guest
« on: 27 Sep 2006, 11:28:36 UTC »

I'm having some difficulties dragging from an image, and then dropping onto a datagrid. Now I don't want the image in datagrad (or anything crazy like that) I just want the image to act as the drag initiator, which can assign some DragSource data to the datagrid by reference.

I had something working fairly loosely yesterday, but I kept getting an error: TypeError: Error #1009: Cannot access a property or method of a null object reference, when I dropped the image onto the datagrid. Does anyone have an ideas what might be causing this?

Here's my code for starters:

Code:
**** Application.mxml (Main Application) **********

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:com="com.*">
<mx:Style source="styles.css"/>
<mx:Script>
      <![CDATA[
            import mx.collections.ArrayCollection;
                  import mx.events.DragEvent;
                  import mx.managers.DragManager;
                  import flash.events.MouseEvent;
                  [Bindable] private var dgArray_collection:ArrayCollection = new ArrayCollection();

                  private function funcDragDrop(event:DragEvent):void
                  {
                        //mx.controls.Alert.show("drag drop");
                        
                        if( event.dragSource.hasFormat( "items" ) )
                {
                    var sourceObject:Object = event.dragSource.dataForFormat( "items" );
                    mx.controls.Alert.show( sourceObject.name, sourceObject.prices );
                }
                  }            
                  private function funcDragEnter( event:DragEvent ):void
            {
                DragManager.acceptDragDrop(myDg);
            }
            
      ]]>
</mx:Script>
      <mx:Panel title="Panel Title" width="955" height="600">            
            <mx:VBox width="100%" height="100%" horizontalAlign="center">
                  <mx:HBox width="100%" height="50%">
                        <mx:LineChart id="myChart" dragEnter="funcDragEnter(event)" dragDrop="funcDragDrop(event)"/>
                        <mx:DataGrid dragEnter="funcDragEnter(event)" dragDrop="funcDragDrop(event)" id="myDg" dropEnabled="true"/>
                  </mx:HBox>
                  <com:navigation id="navigation" numberMenuItems="5"/>                  
            </mx:VBox>
      </mx:Panel>
</mx:Application>



**** Navigation.mxml (Component) **********

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="900" height="300" creationComplete="createMenu()"
      horizontalAlign="center">
      <mx:Script>
            <![CDATA[
                  
                  import mx.events.DragEvent;
                  import mx.core.DragSource;
                      import mx.managers.DragManager;
                  import mx.controls.Image;
                  import flash.events.MouseEvent;
                  [Bindable] public var numberMenuItems:Number = 3;
                  [Bindable] public var itemInfo_object:Object = new Object();
                  [Bindable] public var embedImage:Object = new Object();
                  
                  private function createMenu():void
                  {
                        for (var i:int = 0; i<numberMenuItems; i++)
                        {
                              trace('entered loop');
                              
                              // set item info
                              itemInfo_object[i] = new Object();
                              itemInfo_object[i].name = String("box"+i);
                              itemInfo_object[i].prices = String("prices for item "+i);
                              
                              // create box image and add to HBox
                              embedImage[i] = new Image();
                              embedImage[i].id = String("box"+i);
                              embedImage[i].name = String(i);
                              embedImage[i].source = "_assets/boxTransparent.png";
                              embedImage[i].addEventListener("mouseDown",startDragFunc);
                              this.addChild(embedImage[i]);
                        }
                  }                  

                  private function startDragFunc(event:MouseEvent):void
                  {
                        var items:Object = new Object();
                        items.name = itemInfo_object[event.currentTarget.name].name;
                        items.prices = itemInfo_object[event.currentTarget.name].prices;

                        var ds:DragSource = new DragSource();
                        ds.addData(items,"items");
                        DragManager.doDrag(embedImage[event.currentTarget.name],ds,event);
                        
                  }
                  private function dropTheData():void
                  {
                        
                  }

                  // Handles calls to the DragManager
                  
                  
            ]]>
      </mx:Script>
</mx:HBox>
« Last Edit: 27 Sep 2006, 11:56:04 UTC by flexy » Logged
Nirth
Guest
« Reply #1 on: 27 Sep 2006, 12:07:24 UTC »

I've switched default drag\drop support (dropEnabled = false), so DataGrid dont use stuff on it's own.

here it is.

main stuff
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:com="com.*">
<mx:Script>
      <![CDATA[
            import mx.collections.ArrayCollection;
                  import mx.events.DragEvent;
                  import mx.managers.DragManager;
                  import flash.events.MouseEvent;
                  [Bindable] private var dgArray_collection:ArrayCollection = new ArrayCollection();

                  private function funcDragDrop(event:DragEvent):void
                  {
                        //mx.controls.Alert.show("drag drop");
                        
                        if( event.dragSource.hasFormat( "items" ) )
                      {
                          var sourceObject:Object = event.dragSource.dataForFormat( "items" );
                          mx.controls.Alert.show( sourceObject.name, sourceObject.prices );
                          dgArray_collection.addItem(sourceObject);
                          myDg.dataProvider = dgArray_collection.source;
                      }
                  }            
                  private function funcDragEnter( event:DragEvent ):void
                  {
                      DragManager.acceptDragDrop(myDg);
                  }
            
      ]]>
</mx:Script>
      <mx:Panel title="Panel Title" width="955" height="600">            
            <mx:VBox width="100%" height="100%" horizontalAlign="center">
                  <mx:HBox width="100%" height="50%">
                        <mx:LineChart id="myChart" dragEnter="funcDragEnter(event)" dragDrop="funcDragDrop(event)"/>
                        <mx:DataGrid dragEnter="funcDragEnter(event)" dragDrop="funcDragDrop(event)" id="myDg">
                              <mx:columns>
                                    <mx:DataGridColumn dataField="name" />
                                    <mx:DataGridColumn dataField="price"/>
                              </mx:columns>
                        </mx:DataGrid>
                  </mx:HBox>
                  <com:navigation id="navigation" numberMenuItems="5"/>                  
            </mx:VBox>
      </mx:Panel>
</mx:Application>

Navigation is same
Logged
flexy
Guest
« Reply #2 on: 27 Sep 2006, 12:12:55 UTC »

That worked a treat! So if you're handling dragging and dropping manually in AS, you need to make sure the Flex components aren't trying to handle it too?

Good to know, shame Adobe couldn't have made this a bit clearer somewhere!  Roll Eyes

Thanks Nirth.
Logged
Nirth
Guest
« Reply #3 on: 27 Sep 2006, 12:22:10 UTC »

Maybe there are more advanced way, how to tech default list based components drag and drop engine work fine, when i was developing Draging and Droping items via LocalConnection, I found this issue in mx.controls.listClasses.ListBase.

PS I have not finished local connection stuff, there some seriouse user interface problems wich i cannot solve yet.

Logged
flexy
Guest
« Reply #4 on: 27 Sep 2006, 13:38:52 UTC »

I think there's still plenty to be worked-out in terms of Drag and Drop. I had a look on Flexcoders today, and there loads of unanswered threads about drag and drop probs.

The story continues....
Logged
Pages: [1] Print
« previous next »
Share this on: Twitter Twitter Del.icio.us del.icio.us Digg Digg
Jump to:

©2006-2010 Flexdeveloper.eu/Jodie O'Rourke. All rights reserved.
Adobe®, Adobe® Flash™, Adobe® AIR™ and Adobe® Flex™ are registered trademarks of Adobe Systems Incorporated in the United States and other countries. All rights reserved.

Powered by SMF 1.1.11 | SMF © 2006-2009, Simple Machines LLC