Layout Reorderer Integration - Layout - v0.5

The Layout Reorderer understands each particular layout that it is working with via two Javascript objects that describe it: the layout object and the dropTargetPerms object. To use the Layout Reorderer, you will have to create these objects to pass in on initialization. The format of these objects is described below.

Layout

The Layout Reorderer works with modules of content that are organized into columns, as in the image below. In this example, we have five content modules organized into two columns: three in the left column and two in the right.

Let's look at this object in more detail:

The layout object contains two members: id and columns. The id member is simply the ID of the main container. In this example, let's say that's module-container.

The columns member is itself an object that describes the columns and their contents. It is an array, where each element in the array is in turn an object that describes one column. In our example, we have two columns, so the array has two rows, each containing an object:


columns:[
    { id:"column_1", children:["module-1", "module-2", "module-3"]},
    { id:"column_2", children:["module-4", "module-5"]}
]

The object in each row has two members, id and children. Since each of these object describes one column, the id member is the ID of that column. The children member is an array of the IDs of all of the children of that column. In our example, the first column has three children (modules 1 through 3), so the object describing it looks like this:


{
    id       : "column_1",
    children : ["module-1", "module-2", "module-3"]
}

In the snippet above, the object has been spread out over a few lines to make it easier to see, but it's the same as in the earlier snippets.