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>