Tip:
Highlight text to annotate it
X
Hi I'm Colin Clark and I'm the technical lead for the Fluid Project
Today I'd like to show you the reorderer a family components we ship
as part of our Infusion javascript application framework
The reorderer lets users directly interact with objects on screen using drag and drop
and like all Infusion components it's not just accessible
it's built to provide a great user experience for a variety of needs
As you've seen, we created the reorderer as a family of components
designed for different content types and interactions
it's all the same code underneath, but we provide you with different styling,
interactions and cues for your application and your particular needs
When we built the reorderer we looked at other javascript drag and drop libraries
and found they all suffered from jerky motion
and areas where the user couldn't easily drop items and would get stuck
We built the reorderer with a sophisticated geometry algorithm
to ensure that the user's always successful in dropping their object where they want
no matter how far away they are from the target
the whole page is an active drop region
We created the reorderer to be very configurable so you can bring your own design creativity to the table
You can customize the styling, the markup, the interactions and cues
and listen for rich events to add your own behaviour
Out of the box we ship several configurations that make it easy for you to add the reorderer
to your website or application with only a few lines of code
you can reorder lists as well as grids and other 2 D layouts
image galleries for an iPhoto style interaction of reorganizing images
and layouts for portals and other module based user interfaces
I mentioned earlier that we built the reorderer to be accessible
but we wanted to go beyond basic accessibility and think about the user experience
of people who use the keyboard or an assistive technology
in the end we came up with an interaction that takes advantage of the arrow keys
to mimic the experience of directly moving items on a table in the real world
This is much more usable then other drag and drop libraries
So that's the reorderer in action. Give it a try and let us know what you think.
Thanks very much.