How can I automatically scroll a VBox when an item is drug near the top or bottom edge?

Question

I have a VBox containing a bunch of panels. I have implemented dragging and dropping but I need to be able to scroll automatically when the item is drug near the edge. I am having mixed results. I can get it to work, but not well. My example is below. It works if the user bounces their mouse around a little near the top or bottom edge, but I want it to work if they just hold the mouse there. Any suggestions?

On Mouse down (I'm doing several other things but this is one of them):

VBox(di.parent).addEventListener(MouseEvent.MOUSE_MOVE,autoScrollSection,true,500);

On dragDrop

VBox(evt.currentTarget.parent).removeEventListener(MouseEvent.MOUSE_MOVE, autoScrollSection,true);

Here is the autoScroll function:

private function autoScrollSection(evt:MouseEvent):void{
    var tempVBox:VBox = VBox(evt.currentTarget);
    if(tempVBox.mouseY<50){
        tempVBox.verticalScrollPosition += -50;
    }
    if(tempVBox.mouseY> int(tempVBox.height-50)){
        tempVBox.verticalScrollPosition += +50;
    }
}

So if they are within 50px of an edge then it should scroll by 50px. I've exaggerated the numbers just to get an affect.

Answer 1

Heres how I solved it:

[Bindable] public var timer:Timer = new Timer(50);
private function autoScrollSection(active:Boolean,cont:VBox):void{
    if(active){
        timer.addEventListener(TimerEvent.TIMER,function():void{
            if(cont.mouseY<50){
                cont.verticalScrollPosition += -20;
            }
            if(cont.mouseY> int(cont.height-50)){
                cont.verticalScrollPosition += +20;
            }
        })
        timer.start();
    }else{
        timer.stop();
    }
}

Then changed the calls in mouse down and drag drop to this respectively

autoScrollSection(true,VBox(di.parent));
autoScrollSection(false,VBox(evt.currentTarget.parent));

It works but feels like a bit of a hack. I welcome any better suggestions.