We’re really close to putting out Fluid Infusion 0.3. It’ll be ready in a few days, and is shaping up to be a pretty solid release. In addition to a preview version of the Uploader, we’ve really improved the user experience and functionality of the Reorderer. We’ve added sortable layouts, customizable drag-and-drop interactions, and support for all kinds of portal-y features like locking and efficient keyboard navigation.

One of the things we’ve needed to improve in the Reorderer is the API. In earlier versions, it was pretty hard to initialize your own Reorderer. You needed to know a lot about the inner workings of objects such as LayoutHandlers, item finders, and so on. Infusion 0.3 solves this problem by providing clean, one-line functions for creating your favourite configurations of the Reorderer:

Sorting Lists

fluid.reorderList(containerSelector, itemSelector, orderChangedCallback, options);

Pass in a selector string to locate your list and the items within it, and you’ve got yourself an accessible, sortable list. Optionally, you can also specify a callback function that will be invoked every time the list order changes, along with a whole raft of other options for configuring the Reorderer.

Sorting Grids

fluid.reorderGrid(containerSelector, itemSelector, orderChangedCallback, options);

Same thing. Just pass in a selector string to locate your grid and the items within it, along with an optional order changed callback and some configuration options. Boom, a sortable 2D grid.

Sorting Layouts

fluid.reorderLayout(containerSelector, layoutSelectors, orderChangedCallback, options);

This one is for reordering portlets, content blocks, or other chunks of layout on a page. Pass in a selector to locate the container of your layout. Pass in an object that contains two selectors: one for the columns in the layout and one for the portlets. This function will do all the heavy lifting for you, figuring out which portlets are in each column, building a Layout object, and so on.

If you want all the advanced portal features of the Layout Customizer, such as locking, JSON-based layout, and permissions, you can always drop down to the lower-level API:

fluid.initLayoutCustomizer(layout, permissions, orderChangedURL, options);

This function exposes some of the more complex objects used by the Layout Customizer, the Layout and Permissions objects. The Layout is a JSON-style object representing the column and portlet structure in a DOM-agnostic way. Permissions is a complex data structure encoding all of the valid drop target permissions for each portlet and column in the layout. Generally, you’ll want to use the simpler fluid.reorderLayout() function unless you need the advanced portal features.

Documentation

We realize that code examples and the occasional blog post aren’t nearly enough to get you started using Infusion. Anastasia has been experimenting with some great new documentation for the 0.3 release. It’s still very much a work in progress, but check out her live examples of how to use the Reorderer. She’s still figuring out the right recipe for our documentation, so please share your ideas and thoughts with her!