Drag-and-drop sortable and animated accordion menu

This is the illustration of sortable lists by drag and drop in combination with expandable/collapsible animated accordion.

Animation, some event handling and some object access are based on Yahoo! UI Library.
Accordion menu implementation idea was taken from here.
Core drag and drop function is dom-drag.js. About it you can read here. It's been used as is.
I also used some ideas from here. This page uses dom-drag.js as well.

Here is my demo of the result I've got.

It features:

  • Grip for drag-and-drop.

  • Save/retrieve state (expanded or collapsed) and order of bars in cookies.

  • MS Internet Explorer and Mozilla Firefox similar behavior.

  • Customizable: allowMultipleExpand, expandAllOnload.

  • Pure javascript implementation.

If I'm not get lazy I'll publish the documentation and API.


Popular posts from this blog

Data visualization for Roadmap Microsite (Angular and D3.js)

Conceptual design

Four tools for prototyping: Sketch, Figma, Principle, and FramerX