4 Replies Latest reply on May 17, 2007 7:13 AM by Jokula007

    Drag and Drop from Horizontal List

    Jokula007
      I am trying to create a horizontal list, which would be a graphical representation of custom mxml components I have built. I want user's to be able to drag these components to a "dashboard" type of environment where they could customize the data presented to them.

      Any Ideas would be greatly appreciated, I have been toilng with the drag and drop samples for about 2 weeks now with no success
        • 1. Re: Drag and Drop from Horizontal List
          peterrowe
          What's not working?

          Here is an example of drag and drop using images between two Horizontal Lists, just use your own images. Try that first, then you can just include an image path in the object you are actually dragging and use those for the drag representation. If you need to you can create a custom item renderer to do things like check items before you allow them to be dropped etc. These are real easy to do because a Horizontal List is already a drag and drop away component.

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#c0c0c0, #c0c0c0]">

          <mx:Script>
          <![CDATA[
          import mx.collections.*;
          import mx.controls.Image;
          import mx.controls.Alert;
          import mx.events.*;

          private var catalog:ArrayCollection;

          private static var skillText:Array = new Array();

          skillText[0] = ["Nomi", "This is here you learn about the alphabet"];
          skillText[1] = ["Treecia and Elmer", "Here is where single sounds consonants are learned with fruit"];
          skillText[2] = ["Flop", "Tricky words to match up here at the castle gate"];
          skillText[3] = ["Jester", "I hope he doesn't get the stutters"];
          skillText[4] = ["The Princess", "Oh, she is so pretty"];
          skillText[5] = ["Miss Penny", "Commin' right atcha"];
          skillText[6] = ["The Ogre", "Oh, I say, that's a nice suit"];
          skillText[7] = ["The Annas", "Acktung, you vill do it my vay, YA!"];
          skillText[8] = ["Benny the Baker", "Burdy, burdy, that cake sure looks nice"];
          skillText[9] = ["Nick Nicle", "a Penny for your thoughts, coool one"];
          skillText[10] = ["Chrisopolis", "I need my coffee"];
          skillText[11] = ["Calico Kid", "har, har, me matties"];

          private static var cat:Array = [
          "assets/nomi.gif",
          "assets/treecia.gif",
          "assets/flop.gif",
          "assets/jester.gif",
          "assets/princess.gif",
          "assets/penny.gif",
          "assets/ogre.gif",
          "assets/annas.gif",
          "assets/benny.gif",
          "assets/nick.gif",
          "assets/chris.gif",
          "assets/calico.gif"
          ];

          // Initialize the HorizontalList control by setting its dataProvider
          // property to an ArrayCollection containing the items parameter.
          private function initCatalog(items:Array):void {
          catalog = new ArrayCollection(items);
          myList.dataProvider = catalog;
          }

          private function clickSelect(thisEvent: ListEvent): void {

          var index: int;

          // Show Skill Title and Description
          if (thisEvent.columnIndex != -1) {
          index = thisEvent.columnIndex;
          skillTitle.text = skillText[index][0];
          skillDescription.text = skillText[index][1];
          }

          }
          ]]>
          </mx:Script>


          <mx:HorizontalList id="myList"
          itemRenderer="mx.controls.Image"
          creationComplete="initCatalog(cat)"
          dragMoveEnabled = "false"
          dragEnabled="true" width="800"
          dropEnabled="false" dropShadowEnabled="true" columnWidth="100" borderStyle="inset" height="102" rowHeight="82" columnCount="24"
          itemRollOver="clickSelect(event);"/>
          <mx:Spacer height="20"/>
          <mx:TextArea width="178" height="21" fontWeight="bold" id="skillTitle"/>
          <mx:TextArea width="326" height="89" id="skillDescription" borderStyle="inset" backgroundColor="#808080" dropShadowEnabled="true"/>
          <mx:Spacer height="20"/>

          <mx:HorizontalList id="moreList"
          alternatingItemColors="[#E0E0E0, #FFFFFF]"
          columnWidth="78"
          rowHeight="64"
          columnCount="8"
          itemRenderer="mx.controls.Image"
          dragEnabled="true"
          dragMoveEnabled = "true"
          dropEnabled="true"
          borderStyle="inset" dropShadowEnabled="true" horizontalScrollPolicy="off"/>

          </mx:Application>


          • 2. Re: Drag and Drop from Horizontal List
            Jokula007 Level 1
            Thank you for the reply.

            This works I have had all the samples work correctly. The horizontal list will display icons, which will eventually represent custom mxml components. My main dashboard has 4 canvas quadrants, my mxml component is a canvas component and I want to be able to create x number of components in the horizontal list, but allow the user to choose the most important 4 for them to view

            Below is the code from the main dashboard
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="initApp()" layout="absolute" xmlns:local="*" backgroundGradientColors="[#d7dde5, #d7dde5]" width="810" height="575" xmlns:ns1="Components.*" borderColor="#c0c0c0">

            <mx:Script>
            <![CDATA[
            import Components.Activities;
            import mx.controls.HorizontalList;
            import mx.rpc.events.AbstractEvent;
            import mx.events.SliderEvent;
            import mx.controls.ComboBox;
            import mx.controls.HSlider;
            import mx.controls.sliderClasses.Slider;
            import mx.controls.sliderClasses.SliderThumb;
            import mx.collections.ArrayCollection;
            import mx.core.UIComponent;
            import mx.rpc.events.*;
            import mx.events.DragEvent;
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.controls.List;
            import mx.controls.Image;
            import mx.collections.IList;
            import flash.events.MouseEvent;
            import mx.containers.Canvas;
            import mx.controls.Alert;
            import mx.utils.ObjectUtil;

            [Bindable]
            [Embed(source="Images/Activities.png")]
            public var activities:Class;

            [Bindable]
            [Embed(source="Images/Sales.png")]
            public var sales:Class;

            public function initApp():void
            {

            }

            // Called when the user clicks the mouse on either colored canvas.
            // Initializes the drag.
            public function dragIt(event:MouseEvent, text:String, format:String):void
            {
            // Get the drag initiator component from the event object.
            var dragInitiator:Canvas=Canvas(event.currentTarget.selectedItem);

            // Create a DragSource object.
            var ds:DragSource = new DragSource();

            // Add the data to the object.
            ds.addData(text, format)

            // Create a Canvas container to use as the drag proxy.
            // You must specify a size for the proxy image,
            // or else it will not appear.
            var canvasProxy:Canvas = new Canvas();
            canvasProxy.width=30;
            canvasProxy.height=30;
            canvasProxy.setStyle('backgroundColor', dragInitiator.getStyle('backgroundColor'));
            //canvasProxy.label = text;

            // Call the DragManager doDrag() method to start the drag.
            // For information on this method, see
            // the "Initiating the drag" section.
            DragManager.doDrag(dragInitiator, ds, event, canvasProxy);
            // DragManager.doDrag(dragInitiator, ds, event, canvasProxy);
            }

            // Called if the user dragged a proxy onto the drop target canvas.
            public function doDragEnter(event:DragEvent):void {
            // Get the drop target component from the event object.

            var dropTarget:Canvas=Canvas(event.currentTarget)
            // Accept the drag only if the user is dragging data
            // identified by the 'color' format value.
            //if (event.dragSource.hasFormat('color')) {
            DragManager.acceptDragDrop(dropTarget)
            //}
            }

            // Called if the target accepts the dragged object and the user
            // releases the mouse button while over the canvas.
            // Handles the dragDrop event for the List control.
            public function doDragDrop(event:DragEvent):void {
            // Get the data identified by the color format from the drag source.
            var data:Object = event.dragSource.dataForFormat('color');
            // Set the canvas color.
            this.setStyle("backgroundColor", data);
            }

            ]]>
            </mx:Script>

            <mx:Canvas id="uLeft" width="399" height="260" top="5" left="5" borderStyle="solid" borderColor="#c0c0c0"
            dragEnter="doDragEnter(event);"
            dragDrop="doDragDrop(event);">
            <ns1:Activities left="0" right="0" bottom="0" top="0"></ns1:Activities>

            </mx:Canvas>

            <mx:Canvas id="uRight" width="399" height="260" right="5" top="5" borderStyle="solid" borderColor="#c0c0c0"
            dragEnter="doDragEnter(event);"
            dragDrop="doDragDrop(event);">
            </mx:Canvas>

            <mx:Canvas id="bLeft" height="260" top="267" borderStyle="solid" borderColor="#c0c0c0" left="5" width="399"
            dragEnter="doDragEnter(event);"
            dragDrop="doDragDrop(event);">
            </mx:Canvas>

            <mx:Canvas id="bRight" width="399" height="260" right="5" top="267" borderStyle="solid" borderColor="#c0c0c0"
            dragEnter="doDragEnter(event);"
            dragDrop="doDragDrop(event);">
            </mx:Canvas>

            <mx:HorizontalList
            dragEnabled="true"
            dragDrop="doDragDrop(event);"
            click="dragIt(event, 'red', 'color');"
            id="hListApp"
            height="39"
            right="5"
            bottom="5"
            left="5">
            <mx:dataProvider>
            <mx:Array>
            <mx:Canvas id="Activities" icon="{activities}"/>
            </mx:Array>
            </mx:dataProvider>
            </mx:HorizontalList>

            </mx:Application>
            • 3. Re: Drag and Drop from Horizontal List
              peterrowe Level 1
              Ah, so you want to drag an image from the HorizontalList to one of your four canvases?

              This will drag one of four images from a HorizontalList to a Canvas. Depending on the image the canvas is colored differently, if you want to display the image in the canvas then you will need to add it as a child.

              <?xml version="1.0"?>
              <!-- dragdrop\DandDCanvas.mxml -->
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

              <mx:Script>
              <![CDATA[
              import mx.core.DragSource;
              import mx.managers.DragManager;
              import mx.events.*;
              import mx.containers.Canvas;
              import mx.collections.*;
              import mx.controls.Image;
              import mx.controls.Alert;


              private var catalog:ArrayCollection;
              private static var cat:Array = [
              "assets/usbfan.jpg", "assets/usbwatch.jpg",
              "assets/007camera.jpg", "assets/radiowatch.jpg"
              ];

              // Initialize the HorizontalList control by setting its dataProvider
              // property to an ArrayCollection containing the items parameter.
              private function initCatalog(items:Array):void
              {
              catalog = new ArrayCollection(items);
              myList.dataProvider = catalog;
              }


              // Called if the user dragged a proxy onto the drop target canvas.
              private function doDragEnter(event:DragEvent):void {
              // Get the drop target component from the event object.
              var dropTarget:Canvas=Canvas(event.currentTarget);

              DragManager.acceptDragDrop(dropTarget);
              }

              // Called if the target accepts the dragged object and the user
              // releases the mouse button while over the canvas.
              private function doDragDrop(event:DragEvent):void {
              // Get the dragged object(s) array
              var dragObj: Array=event.dragSource.dataForFormat("items") as Array;

              if (dragObj[0] == 'assets/usbfan.jpg')
              myCanvas.setStyle("backgroundColor", 0x0000FF);
              else
              myCanvas.setStyle("backgroundColor", 0x00FF00)
              }

              ]]>
              </mx:Script>


              <mx:Label text="Drag the item into this canvas"/>

              <!-- Handles dragEnter and dragDrop events to allow dropping -->
              <mx:Canvas id="myCanvas"
              width="100" height="100"
              backgroundColor="#FFFFFF"
              borderStyle="solid"
              dragEnter="doDragEnter(event);"
              dragDrop="doDragDrop(event);"/>

              <!-- A four-column HorizontalList -->
              <mx:HorizontalList id="myList" columnWidth="100" rowHeight="100"
              columnCount="4" itemRenderer="mx.controls.Image"
              creationComplete="initCatalog(cat)" dragEnabled="true"/>

              </mx:Application>

              • 4. Re: Drag and Drop from Horizontal List
                Jokula007 Level 1
                Thank you for your reply.. This is getting me closer, but I don't want to actually drag a Graphic, I would like to "Graphically" represent a custom mxml component.