I was wondering if you (or anyone else!) got any further with your quest to add drag drop functionality to a custom layout.
I have created my own custom layout similar to a tile layout except a list item can have different widths according to a setting within the list, based on the column count.

For example, an item with a ‘cellAllocation’ of 2 will take up 2 columns whereas an item with ‘cellAllocation’ set to 1 will take up 1. If the column count is set to 3, they will all fit on one line.

This has all worked well up till now where I have to be able to move the ‘pods’ around on screen and so I was wondering if you could post an example of how you overcame this problem.

Anybody else who could help would be a life saver!

Thanks!

package components
{
import mx.core.ILayoutElement;

import spark.components.supportClasses.GroupBase;
import spark.layouts.supportClasses.LayoutBase;

public class FlowLayout extends LayoutBase
{
//—————————————————————
//
// Class properties
//
//—————————————————————

//—————————————————————
// horizontalGap
//—————————————————————

private var _horizontalGap:Number = 10;

public function set horizontalGap(value:Number):void
{
_horizontalGap = value;

// We must invalidate the layout
var layoutTarget:GroupBase = target;
if (layoutTarget)
layoutTarget.invalidateDisplayList();
}

//—————————————————————
// verticalGap
//—————————————————————

private var _verticalGap:Number = 20;

public function set verticalGap(value:Number):void
{
_verticalGap = value;

// We must invalidate the layout
var layoutTarget:GroupBase = target;
if (layoutTarget)
layoutTarget.invalidateDisplayList();
}

//—————————————————————
// verticalAlign
//—————————————————————

private var _verticalAlign:String = “bottom”;

public function set verticalAlign(value:String):void
{
_verticalAlign = value;

// We must invalidate the layout
var layoutTarget:GroupBase = target;
if (layoutTarget)
layoutTarget.invalidateDisplayList();
}

//—————————————————————
// horizontalAlign
//—————————————————————

private var _horizontalAlign:String = “left”; // center, right

public function set horizontalAlign(value:String):void
{
if (_verticalAlign != “compress”)
{
_horizontalAlign = value;
}

// We must invalidate the layout
var layoutTarget:GroupBase = target;
if (layoutTarget)
layoutTarget.invalidateDisplayList();
}

//—————————————————————
//
// Class methods
//
//—————————————————————

override public function updateDisplayList(containerWidth:Number,
containerHeight:Number):void
{
var element:ILayoutElement;
var layoutTarget:GroupBase = target;
var count:int = layoutTarget.numElements;
var hGap:Number = _horizontalGap;
var vGap:Number = _verticalGap;

// The position for the current element
var x:Number = 10;
var y:Number = 0;
var elementWidth:Number;
var elementHeight:Number;
var vAlign:Number = 0;

switch (_verticalAlign)
{
case “middle” : vAlign = 0.5; break;
case “bottom” : vAlign = 1; break;
}

// Keep track of per-row height, maximum row width
var maxRowWidth:Number = 0;

// variables used for compressed layout
var firstRow:Boolean = true;
var elementsPerRow:int = 1;

// loop through the elements
// while we can start a new row
var rowStart:int = 0;
while (rowStart < count)
{
// The row always contains the start element
element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowStart) :
layoutTarget.getElementAt(rowStart);

var rowWidth:Number = element.getPreferredBoundsWidth();
var rowHeight:Number = element.getPreferredBoundsHeight();

// Find the end of the current row
var rowEnd:int = rowStart;
while (rowEnd + 1 containerWidth)
break;
//
if (firstRow)
{
elementsPerRow ++;
}
//
rowWidth += hGap + elementWidth;
rowHeight = Math.max(rowHeight, elementHeight);
rowEnd++;
}

x = 10;
switch (_horizontalAlign)
{
case “center” : x = Math.round(containerWidth – rowWidth) / 2; break;
case “right” : x = containerWidth – rowWidth;
}

// Keep track of the maximum row width so that we can
// set the correct contentSize
maxRowWidth = Math.max(maxRowWidth, x + rowWidth);

// Layout all the elements within the row
for (var i:int = rowStart; i <= rowEnd; i++)
{
element = useVirtualLayout ? layoutTarget.getVirtualElementAt(i) :
layoutTarget.getElementAt(i);

// Resize the element to its preferred size by passing
// NaN for the width and height constraints
element.setLayoutBoundsSize(NaN, NaN);

// Find out the element's dimensions sizes.
// We do this after the element has been already resized
// to its preferred size.
elementWidth = element.getLayoutBoundsWidth();
elementHeight = element.getLayoutBoundsHeight();

// Calculate the position within the row
var elementY:Number = Math.round((rowHeight – elementHeight) * vAlign);

// Compress the vertical space between elements in the same column
if (_verticalAlign == "compress" && !firstRow)
{
var elementAbove:ILayoutElement = layoutTarget.getElementAt(i – elementsPerRow);
y = elementAbove.getLayoutBoundsY() + elementAbove.getPreferredBoundsHeight() + vGap;
}
// Position the element
element.setLayoutBoundsPosition(x, y + elementY + vGap);

x += hGap + elementWidth;
}

// Next row will start with the first element after the current row's end
rowStart = rowEnd + 1;
firstRow = false;

// Update the position to the beginning of the row
x = 10;
y += vGap + rowHeight;
}

// Set the content size which determines the scrolling limits
// and is used by the Scroller to calculate whether to show up
// the scrollbars when the the scroll policy is set to "auto"
layoutTarget.setContentSize(maxRowWidth, y);
}
}
}

I don’t suppose anyone else has run into it. But, if you can tell me why a VerticalLayout wouldn’t have this problem when the FlowLayout does, I can try to work a fix into it.

Perhaps you need to set the gaps to zero (they default to 6)?
If the issue is somewhere else, I'd encourage you to post at the Flex SDK forums with a small sample app, so we can take a look at it (http://forums.adobe.com/community/labs/gumbo/).