0 Replies Latest reply on Aug 3, 2007 1:01 AM by dilbertje

    draggable objects disappear

    dilbertje Level 1
      dit is de code nu, maar er ontbreke nog enkele functies:
      This is the code to drag and drop elements into another object, but I can't seem to find some functions:

      1) I can drag and drop objects into theBox-panel, but when I clickndrag them, the panel jumps down instead off staying on the mousecursor.

      2) I would like that the draggable panels stay in place. When I drag and drop them now, the panels disappear...

      3) how can I make the graphs, wich have been added to the theBox-panel, draggable also?

      can someone help me with this please?


      The code:

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Script>
      <![CDATA[
      import mx.containers.Panel;
      import mx.collections.ArrayCollection;
      import mx.events.DragEvent;
      import mx.containers.Box;
      import mx.managers.DragManager;
      import mx.core.DragSource;
      [Bindable]
      public var asian:ArrayCollection = new ArrayCollection([
      {item:2000},
      {item:3300},
      {item:3000},
      {item:2100},
      {item:3200}
      ]);
      [Bindable]
      public var europe:ArrayCollection = new ArrayCollection([
      {item:5000},
      {item:6040},
      {item:3000},
      {item:100},
      {item:1230}
      ]);
      //
      [Bindable]
      private var totalValue:uint;
      [Bindable]
      public var theElement:Panel = new Panel();
      private function dragIt(event:MouseEvent):void
      {
      var dragInitiator:Panel= event.currentTarget as Panel;
      theElement = dragInitiator;
      var dragSource:DragSource = new DragSource();
      var dragProxy:Panel = new Panel();
      dragProxy = Panel(event.currentTarget);
      DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
      }
      private function dragEnterHandler(event:DragEvent):void
      {
      var dropTarget:Panel=event.currentTarget as Panel;
      DragManager.acceptDragDrop(dropTarget);
      }
      private function dragDropHandler(event:DragEvent):void
      {
      var graph:PieChart = new PieChart();
      graph = theElement.getChildAt(0) as PieChart;
      theBox.addChild(graph);
      }
      ]]>
      </mx:Script>
      <mx:Panel id="chart1" title="Data 1" x="24" y="24" mouseMove="dragIt(event)" height="35" width="
      306">
      <mx:PieChart id="data1" dataProvider="{asian}" width="286" height="286">
      <mx:series>
      <mx:PieSeries labelPosition="inside" field="item" displayName="Quantity" showDataEffect="
      slideDown" hideDataEffect="slideDown" />
      </mx:series>
      </mx:PieChart>
      </mx:Panel>
      <mx:Panel id="chart2" title="Data 2" x="24" y="67" mouseMove="dragIt(event)" height="35" width="
      306">
      <mx:PieChart id="data2" dataProvider="{europe}" width="286" height="286">
      <mx:series>
      <mx:PieSeries labelPosition="inside" field="item" displayName="Quantity" showDataEffect="
      slideDown" hideDataEffect="slideDown" />
      </mx:series>
      </mx:PieChart>
      </mx:Panel>
      <mx:Panel id="chart3" title="Data 2" x="24" y="110" mouseMove="dragIt(event)" height="35"
      width="306">
      <mx:PieChart id="data3" dataProvider="{europe}" width="286" height="286">
      <mx:series>
      <mx:PieSeries labelPosition="inside" field="item" displayName="Quantity" showDataEffect="
      slideDown" hideDataEffect="slideDown" />
      </mx:series>
      </mx:PieChart>
      </mx:Panel>
      <mx:Panel layout="horizontal" id="theBox" dragEnter="dragEnterHandler(event)" dragDrop="
      dragDropHandler(event)" width="656" height="734" x="358">
      </mx:Panel>
      </mx:Application>