Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

The Reorderer

Info
titleHow to use the Reorderer

For information on how to use the Reorderer, see

What is the Reorderer?

...

Panel
borderColor#42773F
bgColor#F4F7F2
borderStylesolid
Section
Column

Image Added

Column

Reorderer

Excerpt

The Reorderer allows developers to create rich, accessible user interfaces

...

which enables users to directly

...

re-arrange content on the page. The Reorderer

...

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.

Technical Information

Tutorials

Reorderer Road Map

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
  • Allow Reorderers to be nested inside other Reorderers
  • Make the drag and drop behaviour more customizable
  • Improve IE and Safari 3 support
  • Integrate the Reorderer into uPortal. (In progress, see Reorderer in uPortal)

...

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.

Features

  • 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
Column
width65%
Panel
borderColor#848484
bgColor#FFF
titleBGColor#E8E8E8
borderStylesolid
titleReorderer Family

List Reorderer

Image Added
Reorder elements in a list using drag and drop, numbering and/or keyboard interactions

Grid Reorderer

Image Added
Reorder items in a linear, flowed set using drag and drop, numbering and/or keyboard interactions

Image Reorderer

Image Added
Allow user to reorder images or thumbnails of images

Layout Reorderer

Image Added
Reorder portlets in the portal page using drag and drop and/or keyboard interactions without leaving the page

Column
width35%
Panel
borderColor#321137
bgColor#fff
titleBGColor#aab597
borderStylesolid
titleStatus

This component is in Production status

Panel
borderColor#848484
bgColor#EFEFEF
titleBGColor#CCCCCC
borderStylesolid

Design

Development

Integration

Demo

Last stable release (v0.8)

Nightly build