0 Replies Latest reply on Feb 23, 2010 1:52 AM by Maluamrita

    Drag and drop shopping cart

    Maluamrita

      Hai friends..

      Am new to flex and want to implement a shopping cart with drag and drop in flex.

      Am using mysql db.I brought the images of products (including details) from db using php.

      And displayed them in one datagrid..and am using another one datagrid as shopping basket..

      i can drag and drop images from the former datagrid to the later..bt i cant see them..

      Here is my code..

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:phpDemo="*" layout="absolute"
        width="800" height="500" creationComplete="getPhoto.send()"  color="#47BCEC">
       
        <mx:HTTPService
              id="getPhoto"
              url="http://192.168.60.74/ecommerce/Test/getPhoto.php"
              useProxy="false" />
             
           <mx:Script>
          <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.collections.ListCollectionView;
      import mx.controls.List;
      import mx.core.DragSource;
      import mx.events.*;
      import mx.managers.DragManager;
      import mx.controls.Alert;
      import mx.collections.IList;
      import mx.controls.Image; 
      import flash.events.MouseEvent;
      private var dropInitiator:String
      private var cartContents:ArrayCollection = new ArrayCollection();

      private function setDragInitator(event:MouseEvent, id:String):void 
      {
      dropInitiator = id;
      }
      private function doDragEnter(event:DragEvent):void
      {
      var dropTarget:DataGrid = DataGrid(event.currentTarget);
      var items:Image = event.dragSource.dataForFormat("items") as Image;
      var drop:Boolean = true;
      if(dropInitiator == dropTarget.id){
      DragManager.showFeedback(DragManager.MOVE);
      DragManager.acceptDragDrop(dropTarget);
      }
      if(drop){
      DragManager.showFeedback(DragManager.COPY);
      DragManager.acceptDragDrop(dropTarget);
      }
      }
      private function doDragDrop(event:DragEvent):void
      {
      var dropTarget:DataGrid = DataGrid(event.currentTarget);
      doDragExit(event);
      var items:Image = event.dragSource.dataForFormat("items") as Image;
      var dropLoc:int = dropTarget.calculateDropIndex(event);
      IList(dropTarget.dataProvider).addItemAt(items, dropLoc );
      }
      private function doDragExit(event:DragEvent):void
      {
      var dropTarget:DataGrid = DataGrid(event.currentTarget);
      var items:Image = event.dragSource.dataForFormat("items") as Image;
      dropTarget.showDropFeedback(event);
      }
      ]]>
        </mx:Script>
      <mx:DataGrid x="0" y="0" width="114" height="500">
        <mx:columns>
         <mx:DataGridColumn headerText="Categories" dataField="col1"/>
        </mx:columns>
      <mx:DataGrid x="620" y="253" width="180" height="246" >
        <mx:columns>
            <mx:DataGridColumn headerText="Name" dataField="name"/>
            <mx:DataGridColumn headerText="Quantity" dataField="num"
              width="65"/>
        </mx:columns>
      </mx:DataGrid>

      <mx:DataGrid x="122" y="10" width="490" height="480" dragEnabled="true" id="dragList" dataProvider="{getPhoto.lastResult.rss.channel}" mouseDown="setDragInitator(event, &apos;dropList&apos;);"  backgroundColor="#F5EAE9">
      <mx:columns>   
      <mx:DataGridColumn headerText="Preview" dataField="img">
              <mx:itemRenderer>
              <mx:Component>
              <mx:VBox>
              <mx:Image source="{data.img}" width="100%" height="100" horizontalAlign="center"/>
              </mx:VBox>
              </mx:Component>
              </mx:itemRenderer>
              </mx:DataGridColumn>
              <mx:DataGridColumn headerText="details" dataField="des"/>
           </mx:columns>
      </mx:DataGrid>
      <mx:DataGrid x="620" y="10" width="180" height="235" mouseDown="setDragInitator(event, &apos;dropList&apos;);"
      dragEnter="doDragEnter(event);"
      dragExit="doDragExit(event);"
      dragDrop="doDragDrop(event);" dragEnabled="true" id="dropList" dataProvider="{null}">
        <mx:columns>
         <mx:DataGridColumn headerText="ShoppingBasket" dataField="col1"/>
        
        </mx:columns>
      </mx:DataGrid>
      </mx:Application>

       

      Expecting help frm u all...

      Thanking u....