1 Reply Latest reply on Feb 17, 2009 8:24 PM by Sankar Kethineni

    Displaying Image while Dragging in List

    Sankar Kethineni
      Hi All,

      Am using the List controls to display the data and VBox is my itemRenderer. As we all know,by default List/DataGrid provides the Drag and drop features.In the itemrenderer am displaying the CheckBox and some other controls along with the dataFields and when am trying to drag an item it's displayed as in a huge area.

      I want to replace the item with an Image( icon) while dragging.How do i do that? I tried with implementing the doDrag of Dragmanager but am unable to see any image icon while dragging . can anyone solve my problem?

      Any help can be appriciated and Thanks in advance.

      Here is the sample code


      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" verticalAlign="middle">
      <mx:Script>
      <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.managers.DragManager;
      import mx.core.DragSource;
      import mx.controls.Image;
      import mx.events.DragEvent;
      import mx.controls.Alert;

      [Bindable]
      private var initData:ArrayCollection = new ArrayCollection([
      {book:"DBMS",author:"Sudarshan"},
      {book:"C",author:"Yaswanth Kanethkar "},
      {book:"C++",author:"JBalaguruswamy"},
      {book:"Software Engineering",author:"Pressman"}]);

      private function onDragOver(event:MouseEvent):void {
      var dragInitiator:List = List(event.currentTarget);
      var dragSource:DragSource = new DragSource();
      dragSource.addData(dragInitiator,"list");

      var displayIcon:Image = new Image();
      displayIcon.source = "resources/images/todo.png";
      DragManager.doDrag(dragInitiator,dragSource,event,displayIcon);

      }
      ]]>
      </mx:Script>

      <mx:List width="50%" height="50%" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
      dragOver="onDragOver(event)" dataProvider="{initData}">

      <mx:itemRenderer>
      <mx:Component>
      <mx:VBox width="100%" height="100%">
      <mx:HBox>
      <mx:CheckBox/>
      <mx:Label text="Book:{data.book}"/>
      </mx:HBox>
      <mx:Label text="Author:{data.author}" paddingLeft="25"/>
      </mx:VBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:List>
      </mx:Application>