Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 22 Next »

"Excuse the mess"

This page is in the middle of being modified. Please excuse the mess.

The Reorderer

What is the Reoderer?

The Reorderer is a set of JavaScript objects that can be used by developers to create rich, accessible user interfaces that allow users to directly move around and re-arrange content on the page.

The Reorderer supports mouse-based drag and drop as well as fully keyboard-accessible controls. It is designed to be flexible and will handle a variety of markup and layout types. Clear extension points are provided to customize its behaviour for new layouts, connection strategies, and markup binding strategies.

On this Page

Examples of the Reorderer

Unable to render {include} The included page could not be found.
Interaction Design


  • links to current and archived wireframes. Aka "Design iteration"

Context storyboards

  • links to Context of Use Scenarios
  • links to storyboards illustrating use contexts

Design pattern

  • a pattern describing this component
  • link to OSDPL if pattern available

Functional requirements

  • Interaction design
  • Mock-ups

User testing

  • links to user testing protocol, questions, and results

Story cards

  • links to use cases: simple, functional statement, details of interaction, wireframes or mockups, testable

User Modeling

  • links to relevant Personas used



What problem are we solving?

How are we meeting the needs?

Roadmap, Known issues, and Task List

The upcoming road map for the Reorderer is as follows:

  • Create a public, easy-to-use API for extending layout handling behaviour
  • Handle reordering non-adjacent markup such as table cells
  • Better support non-orderable elements by implementing a shifting algorithm
  • Make the drag and drop behaviour more customizable
  • Improve Safari 3 support
  • Integrate the Reorderer into uPortal. (In progress, see Reorderer in uPortal)

For more specific details about Reorderer-related tasks and issues, please see the Reorderer component with Fluid's issue repository.

Working Pages

Technical Working Pages

  • nothing here at the moment.

Design Working Pages

  • nothing here at the moment.

What presentation technologies is supported?

The Reorderer is designed to work across presentation technologies. We've used it in Java RSF and PHP-based applications, but it will work in any technology that can generate known element IDs and can respond to simple POST requests. The contract of the Reorderer is published and easy to implement.

What can I Reorder?

Well, in theory, anything. The Reorderer will work with all kinds of markup you throw at it. Reorder schedules, tasks, lists, whatever you like. There are a few limitations in the current version of the Reorderer that we'll address in future releases. These include:

  • The Reorderer doesn't work well when manipulating non-adjacent elements. This means that reordering table cells and other deeply nested markup doesn't work as expected.
  • No labels