Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The Reorderer

What is

...

name of component?

Section
Column
width65%60%

Excerpt

Image Added 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.

Column
width35%
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn this Page
borderStylesolid
Table of Contents
minlevel2
Section
Column
width50%

Screenshots

{{ Up to 2 images. Anything more would push content beyond the fold. }}
Image Added Image Added

Panel

Column
width50%
Info
title"Demo of the component"

If a usable demo of the component is available on the Wiki, it should be included here.

If a demo is not available, delete this Demo column and let the screenshot column be 100% width.

Include Page
Infusion13:Name of page containing live Wiki demo
Infusion13:Name of page containing live Wiki demo

see http://wiki.fluidproject.org/display/fluid/Layout+CustomizerImage Added for example

Section
Column
width50%
Panel
bgColorwhite
titleBGColor#c1b7c3
titleInteraction Design
borderStylesolid

Wireframes

  • 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

Accessibility

Column
width50%
Panel
bgColorwhite
titleBGColor#c1b7c3
titleTechnical Information
borderStylesolid

API

  • links to API documentation. Use excerpts if possible.

Integration

  • links to integration content. Use excerpts if possible.

Demos

  • links to usable demos and implementations.

Testing

Overview

What problem are we solving?

How are we meeting the needs?

Roadmap, Known issues, and Task List

Working Pages

Technical Working Pages

Design Working Pages

What is the Reorderer?

Section
Column
width60%

Column
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
titleSee Also
borderStylesolid

...