views:

79

answers:

0

I have container (VBox). It contains certain child elements (for example, other Vbox). Container has vertical scrollbar.

When I start dragging certain child, verticall scrolling is not working, why?

I resolved this problem using container's dragOver event. But in Flex 4 I use VGroup as container, and there is not maxVerticalScrollPosition property.

private function containerDragOverHandler(e:DragEvent):void {
var el:Container = Container(e.currentTarget);
 if (e.dragSource.hasFormat('blablabla')) {
  var pt:Point = new Point(e.localX, e.localY);
  pt = el.localToGlobal(pt);
  pt = el.globalToContent(pt);

  var scale:int = el.measuredHeight / el.maxVerticalScrollPosition;
  el.verticalScrollPosition = Math.round(pt.y / scale);
 }
}

I'm newbie, please help me find the solution, how to drag children in container with vertical scrolling?

PS (simple Air (Flex3) example was added)

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
                        layout="absolute"
                        width="500"
                        height="300"
                        creationComplete="ini()">

    <mx:Script>
        <![CDATA[
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.core.Container;
            import mx.events.DragEvent;

            private function ini():void {
                for (var i:int = 0; i < 6; i++) {
                    var el:VBox = new VBox();
                    el.percentWidth = 90;
                    el.height = 50;
                    el.setStyle('backgroundColor', Math.random() * 0xffffff); // just for visibility
                    el.addEventListener(MouseEvent.MOUSE_DOWN, startChildDrag)
                    el.addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler)
                    el.addEventListener(DragEvent.DRAG_DROP, dragDropHandler)

                    container.addChild(el);
                }
            }

            private function startChildDrag(e:MouseEvent):void {
                var dragInitiator:Container = Container(e.currentTarget);

                var ds:DragSource = new DragSource();
                ds.addData('someData', 'blablabla');
                DragManager.doDrag(dragInitiator, ds, e);
            }

            private function dragEnterHandler(e:DragEvent):void {
                if (e.dragSource.hasFormat('blablabla'))
                    DragManager.acceptDragDrop(Container(e.currentTarget));
            }

            private function dragDropHandler(e:DragEvent):void {
                trace('dropped, do some actions');
            }

            private function containerDragOverHandler(e:DragEvent):void {
                var el:Container = Container(e.currentTarget);
                if (e.dragSource.hasFormat('blablabla')) {
                    var pt:Point = new Point(e.localX, e.localY);
                    pt = el.localToGlobal(pt);
                    pt = el.globalToContent(pt);

                    var scale:int = el.measuredHeight / el.maxVerticalScrollPosition;
                    el.verticalScrollPosition = Math.round(pt.y / scale);
                }
            }
        ]]>
    </mx:Script>

    <mx:Canvas width="100%" height="100%" dragOver="containerDragOverHandler(event)">
        <mx:VBox id="container"
                 width="90%"
                 height="100%"
                 verticalGap="10"
                 backgroundColor="#ffffff" />
    </mx:Canvas>

</mx:WindowedApplication>