1 Reply Latest reply on Nov 6, 2009 9:08 AM by David_F57

    Drag scrolling

    ngarg

      Hi,

       

      How can I achieve drag scrolling using spark components?

        • 1. Re: Drag scrolling
          David_F57 Level 5

          Hi,

           

          This is an example of scrolling a list by dragging. Its only basic as to do this without selecting an item you would have to override the default mousedown event for the list. You can use asimiliar method of comparing the Stage position to 'pan' images.

           

          David

           

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

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

             xmlns:s="library://ns.adobe.com/flex/spark"

             xmlns:mx="library://ns.adobe.com/flex/halo"

             creationComplete="application1_creationCompleteHandler(event)" >

           

          <fx:Script>

          <![CDATA[

          import mx.collections.ArrayCollection;

          import mx.events.FlexEvent;

          [Bindable] private var arr:ArrayCollection=new ArrayCollection();

          private var MoveY:Number=0;

          private var NewPos:Number;

           

          protected function list1_mouseDownHandler(event:MouseEvent):void

          {

          MoveY=event.stageY;

          }

           

          protected function list1_mouseMoveHandler(event:MouseEvent):void

          {

          if (event.buttonDown)

          {

          NewPos=MoveY-event.stageY;

          list1.layout.verticalScrollPosition=list1.layout.verticalScrollPosition+NewPos;

          MoveY=event.stageY;

          }

          }

           

          protected function application1_creationCompleteHandler(event:FlexEvent):void

          {

                          for (var i:int=1;i < 40;i++)

          arr.addItem({label:'Scroll me no.'+String(i)});

          list1.scroller.addEventListener(MouseEvent.MOUSE_DOWN,list1_mouseDownHandler);

          list1.scroller.addEventListener(MouseEvent.MOUSE_MOVE,list1_mouseMoveHandler);

          }

           

          ]]>

          </fx:Script>

          <s:List id="list1" dataProvider="{arr}" width="140" height="200"/>

          </s:Application>