0 Replies Latest reply on Sep 25, 2010 7:15 AM by Daniel_Sand

    Dragging an HTML component

    Daniel_Sand

      Hello,

       

      I'm a bit of a  newbie to Flex ( started Yesterday ) and i'm finding my way quit well. Using some of the examples that the internet provides i managed to create the following applcation:

       

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

      <s:WindowedApplication 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="1024" height="768"

         creationComplete="getData.send()" xmlns:flexui="flexunit.flexui.*">


      <fx:Script>

      <![CDATA[

      import flash.utils.flash_proxy;

       

      import mx.collections.ArrayCollection;

      import mx.controls.Alert;

      import mx.core.DragSource;

      import mx.effects.easing.*;

      import mx.events.DragEvent;

      import mx.events.FlexEvent;

      import mx.managers.DragManager;

      import mx.rpc.events.ResultEvent;

      import mx.rpc.xml.SimpleXMLDecoder;

      import mx.utils.ArrayUtil;

       

      [Bindable]

      public var Images:ArrayCollection;

       

      protected function toggleBtn(event:MouseEvent):void

      {

      if(btn.label== 'Open')

      panelOut.play();

      else

      panelIn.play();

      }

       

       

      protected function initiateDrag(event:MouseEvent, value:String):void

      {

      var dragInitiator:HTML = event.currentTarget as HTML;

       

      var dragSource:DragSource = new DragSource();

      dragSource.addData(value, 'value');

       

      var dragProxy:HTML = new HTML();

      dragProxy.location = event.currentTarget.location;

      dragProxy.width = 100 ;

      dragProxy.height = 100 ;

       

      DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);

      }

       

      private function dragEnterHandler(event:DragEvent):void {

      var dropTarget:VBox =event.currentTarget as VBox;

      if (event.dragSource.hasFormat('value')) {

      DragManager.acceptDragDrop(dropTarget);

      }

      }

       

      private function dragDropHandler(event:DragEvent):void {

      var value:String = event.dragSource.dataForFormat('value') as String;

      bigImage.location = "assets/Big_Html/"+value;

      }



       


      ]]>

      </fx:Script>

       

      <mx:Canvas id="panel" width="1013.95" height="202" y="10.3" backgroundColor="#000000" x="0.05">

      <mx:TabNavigator x="2" y="0" width="994" height="181">

      <s:NavigatorContent label="Eerste" width="100%" height="100%" id="navigatorContent">

      <mx:HBox width="992" height="137">

      <mx:Repeater dataProvider="{getData.lastResult.gallery.image}"

      id="rep" width="991" height="137">

      <mx:HTML x="228" y="10" width="113" height="112" location="assets/Small_Html/{rep.currentItem}"

      mouseMove="initiateDrag(event,event.currentTarget.getRepeaterItem())" >

      </mx:HTML>

      </mx:Repeater>

      </mx:HBox>

      </s:NavigatorContent>

      <s:NavigatorContent label="Tweede" width="100%" height="100%">

       

      </s:NavigatorContent>

      </mx:TabNavigator>

      <mx:LinkButton id="btn" width="100%"  height="21" 

         label="Open"

         click="toggleBtn(event)" enabled="true" x="-3" y="179"/>

      <!--Add the content of your sliding panel here  -->

      </mx:Canvas>

      <mx:Canvas>

      </mx:Canvas>

      <mx:VBox width="995" height="508" backgroundColor="#000000"

      horizontalAlign="center" verticalAlign="middle"

      dragEnter="dragEnterHandler(event)"

      dragDrop="dragDropHandler(event)" x="19" y="250">

      <mx:HTML x="83" y="44" id="bigImage"/>

      </mx:VBox>

       

       

       

       


       

      <fx:Declarations>

      <mx:Move id="panelOut" target="{panel}" yTo="0" effectEnd="btn.label='Close'"

      duration="1500" easingFunction="Bounce.easeOut"/>       

      <mx:Move id="panelIn" target="{panel}" yTo="-180" effectEnd="btn.label='Open'"

      duration="1000"  easingFunction="Bounce.easeIn"/>   

      <mx:HTTPService id="getData"

      url="SWF.xml" />


      </fx:Declarations>

      </s:WindowedApplication>

       

      The goals of the application are:
      1     Getting a repeater filled with HTML pages get generated from an XML file
      2     Fitting the repeater in a box that can be hidden
      3     Open HTML pages from the repeater by dragging them into a bigger HTML component
      The first two points work great, no problems there. But the third is a bit more more demaning.
      I set off trying to get this to work with images and that worked  just fine. Apart from not being able to see what i'm dragging, minor issue. Now i try this with the HTML component things start to change. I guess this has to do with the fact that the mouse pointer interacts with the page shown in the HTML component rather then with the HTML component itself.
      Can anyone help with this problem. If not i guess i'm going to work with images in the repeater, that should work.
      Thanks in advanced for any input,
      Daniel