3 Replies Latest reply on Jul 22, 2007 6:00 PM by bayani.portier

    Some issues in Drag-n-Drop --- Need Urgent Help

    sivudu
      Hi All,


      I have couple of doubts in Drag-n-Drop. I have special
      requirements in drag and drop.

      1. Suppose if user drags some element(suppose 53) and drops it on
      target element(suppose 241) where I should give one confirmation
      window contains the followings message

      "Do you want to replace 241 with 53 "

      Suppose if user clicks on ok button then I replace the element.
      else I have revert the drag operation i.e. I have to put drag element
      in original place.

      2.Because I have special requiremnts I used Grids inside of Canvas.
      For Canvas component I intialised the verticalScrollPolicy="on"
      horizontalScrollPolicy="on" . So if GridItems exceeds the width the
      horizontalScroll automatically appears.

      To acheive these requirements I have been facing the following
      problems.

      i. Suppose if user clicks on cancel button how can I
      revert/cancel the drag operation.
      ii. So I have intialized the horizontal and vertical scroll, if I
      drag the element the it is not possible to drop the element inside of
      scroll ohh sorry here I am unable to explain the problem correctly.
      To solve this how can I integrate mouse movements with
      horizontal/vertoical scrolls.

      iii. In <DataGrid> is it possible to put Radio Button / Link Button / any Controls as a column in a row .If possible how can I acheive this thing.

      Here is the source code. So you get correct Idea of iii
      issue.


      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      layout="absolute" >

      <mx:Script>
      <![CDATA[

      import mx.core.DragSource;
      import mx.managers.DragManager;
      import mx.events.*;
      private function dragEnterHandler(event:DragEvent):void {


      }

      private function dragCompleteHandler(event:DragEvent):void {

      }
      ]]>
      </mx:Script>


      <mx:Canvas x="25" y="50" width="100%" height="250"
      verticalScrollPolicy="on" horizontalScrollPolicy="on" >

      <mx:Grid x="0" y="0" height="17" verticalGap="0" horizontalGap="0"
      textAlign="center" verticalAlign="middle">
      <mx:GridRow >
      <mx:GridItem borderStyle="solid" backgroundColor="#ffffff">
      <mx:Label text="NewYork" width="75" />
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#0000ff" >
      <mx:Text text="53" width="124" />
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#0099CC">
      <mx:Text text="54" width="124" />
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#83d5fc">
      <mx:List width="226" textAlign="center" backgroundColor="#83d5fc"
      dragEnabled="true" dropEnabled="true" allowMultipleSelection="true">
      <mx:String >55</mx:String>
      </mx:List>
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#83d5fc">
      <mx:List width="184" name="Ania" iconField="56"
      backgroundColor="#83d5fc" dragEnter="dragEnterHandler(event);"
      dragComplete="dragCompleteHandler(event);" textAlign="center"
      dragEnabled="true" dropEnabled="true" allowMultipleSelection="true">
      <mx:String>56</mx:String>
      </mx:List>
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#83d5fc">
      <mx:List width="90" textAlign="center" dragEnter="dragEnterHandler
      (event);" dragComplete="dragCompleteHandler(event);"
      backgroundColor="#83d5fc" dragEnabled="true" dropEnabled="true"
      allowMultipleSelection="true" >
      <mx:String >57</mx:String>
      </mx:List>
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#83d5fc">
      <mx:List width="148" dragEnter="dragEnterHandler(event);"
      dragComplete="dragCompleteHandler(event);" textAlign="center"
      backgroundColor="#83d5fc" dragEnabled="true" dropEnabled="true"
      allowMultipleSelection="true">
      <mx:String>58</mx:String>
      </mx:List>
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#83d5fc">
      <mx:List width="148" dragEnter="dragEnterHandler(event);"
      dragComplete="dragCompleteHandler(event);" textAlign="center"
      backgroundColor="#83d5fc" dragEnabled="true" dropEnabled="true"
      allowMultipleSelection="true">
      <mx:String>59</mx:String>
      </mx:List>
      </mx:GridItem>


      <mx:GridItem borderStyle="solid" backgroundColor="#008040">
      <mx:Label text="" width="245"/>
      </mx:GridItem>
      </mx:GridRow>
      </mx:Grid>

      <mx:Grid x="0" y="23" height="17" verticalGap="0" horizontalGap="0"
      textAlign="center" verticalAlign="middle">
      <mx:GridRow >
      <mx:GridItem borderStyle="solid" backgroundColor="#ffffff">
      <mx:Label text="LosAngels" width="75" />
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#0000ff" >
      <mx:Text text="124" width="124" />
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#0099CC">
      <mx:Text text="125" width="124" />
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#83d5fc">
      <mx:List width="226" textAlign="center" backgroundColor="#83d5fc"
      dragEnabled="true" dropEnabled="true" allowMultipleSelection="true">
      <mx:String >126</mx:String>
      </mx:List>
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#83d5fc">
      <mx:List width="184" name="Ania" iconField="56"
      backgroundColor="#83d5fc" dragEnter="dragEnterHandler(event);"
      dragComplete="dragCompleteHandler(event);" textAlign="center"
      dragEnabled="true" dropEnabled="true" allowMultipleSelection="true">
      <mx:String>127</mx:String>
      </mx:List>
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#83d5fc">
      <mx:List width="90" textAlign="center" dragEnter="dragEnterHandler
      (event);" dragComplete="dragCompleteHandler(event);"
      backgroundColor="#83d5fc" dragEnabled="true" dropEnabled="true"
      allowMultipleSelection="true" >
      <mx:String>128</mx:String>
      </mx:List>
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#83d5fc">
      <mx:List width="148" dragEnter="dragEnterHandler(event);"
      dragComplete="dragCompleteHandler(event);" textAlign="center"
      backgroundColor="#83d5fc" dragEnabled="true" dropEnabled="true"
      allowMultipleSelection="true">
      <mx:String>129</mx:String>
      </mx:List>
      </mx:GridItem>

      <mx:GridItem borderStyle="solid" backgroundColor="#83d5fc">
      <mx:List width="148" dragEnter="dragEnterHandler(event);"
      dragComplete="dragCompleteHandler(event);" textAlign="center"
      backgroundColor="#83d5fc" dragEnabled="true" dropEnabled="true"
      allowMultipleSelection="true">
      <mx:String>130</mx:String>
      </mx:List>
      </mx:GridItem>


      <mx:GridItem borderStyle="solid" backgroundColor="#008040">
      <mx:Label text="" width="245"/>
      </mx:GridItem>
      </mx:GridRow>
      </mx:Grid>
      </mx:Canvas>
      </mx:Application>


      If user wants drops 55 of Newyork at 130 of LosAngels. If u
      observe the horizontal scroll is not moving to drop 55 of Newyork at
      130 of LosAngels.


      Any help/suggestions in this issues.Really I have been struggling
      for last 4 days to solve these issues. Could anybody suggests me to
      overcome these issues.

      Regards,
      Siva Kumar.
        • 1. Re: Some issues in Drag-n-Drop --- Need Urgent Help
          bayani.portier Level 1
          Hi Silva,

          I think I might be able to help you with your drag and drop issues.

          There is a really neat summary of drag and drop elements here:
          http://www.adobe.com/devnet/flex/quickstart/adding_drag_and_drop/

          Problem 1:
          You have to think in a UI sense about the problem. When you are thinking in a UI sense, you have to think of each individual gesture that the user makes. In this case, there are 3.

          Gesture 1:
          User drags and drops element upon another element.

          Gesture 2:
          User clicks on "Yes" button

          Gesture 3:
          User clicks on "No" button

          Let's look at Gesture 1:
          The user is required to indicate which element to drag onto another element to drop.

          So in this case, your MXML would require element 53 to be draggable.
          dragEnabled="true"

          Object 241 would need to have a dragDropHandler event.

          within your dragDropHandler, you place your UI logic to call the popup, noting which element was dragged on to which.

          private function dragDropHandler(event:DragEvent):void
          {
          //Call popup window, passing sourceDrag and destinationDrag element id's
          }

          Your popup is then called, with all of the required information to execute the change in state, depending on whether the user clicks yes or no.

          Gesture 2:
          Make the change between the source object and the data object.
          Close the popup window.

          Gesture 3:
          Close the popup window, and you're back to a normal state of operations.

          Hope this helps.

          b
          • 2. Some issues in Drag-n-Drop --- Need Urgent Help
            sivudu Level 1
            Hi Bayani,

            Thanks a lot for ur suggestions. I tried the thing what u have said , there also I am facing the same problem, unable to cancel / revert drag operation. Could u suggest me the some other alternative to cancel drag operation.

            And one more problem I have been facing is , I used <Grid>'s inside of <Canvas> instead of <DataGrid>. Because I must display different lengths / widths of columns in a row. It is not possible to do using <DataGrid>. I used <Canvas> just to initialize horizontal / vertical scrolls. So If user drags the element in the <Grid> and wants to drops at the end of <Grid> it' not possible. Becaz the scroll of <Canvas> is not integrated to the dragged element movements. ( If I use <DataGrid> it automatically takes care of dragged element movements with scroll ). How can I solve this problem. and How can I integrate dragged element(mouse) movements with <Canvas> scroll.
            Help me to solve these problems.

            Thanks & Regards,
            Siva Kumar
            • 3. Re: Some issues in Drag-n-Drop --- Need Urgent Help
              bayani.portier Level 1
              Hmm,

              it sounds like a rather convoluted way of solving the problem.

              Why are the elements different sizes? This breaks standard web formatting.

              As to scrolling, perhaps you can have an area at the top and bottom of the pane, so that if you are dragging and you collide with one of them, the canvas scroll page gets rolled up or down.

              b