allows developers to create rich, accessible user interfaces
move around and
which enables users to directly
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.
re-arrange content on the page.
is the "engine" that powers the interaction, and is the place to go to listen for interesting events and actions within the component's lifecycle.
- Change the arrangement of elements using mouse or keyboard.
- Convenient options for rearranging elements contained in a list, grid, a layout, and image gallery.
- Configurable drag and drop appearance and behaviour.
|Section||Infusion13:Sorting Lists Demo||Infusion13:Sorting Lists Demosection|
|title||On this Page|
Examples of the Reorderer
Reorder elements in a list using drag and drop, numbering and/or keyboard interactions
Reorder items in a linear, flowed set using drag and drop, numbering and/or keyboard interactions
Allow user to reorder images or thumbnails of images
Reorder portlets in the portal page using drag and drop and/or keyboard interactions without leaving the page
This component is in Production status
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.
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.