Building a Timeline Grid like layout in Javascript?

Question

I am trying to create a Timeline Grid for adding and managing tasks at specific times(seconds) on a timeline. Is there a way to be able to create such a timeline Javascript/jquery?

What I am trying to do it have a 0.5 sec. intervals on the timeline. Every item has a start and an end range on the timeline. The items can be draggable to change starting and ending range and also resizeable. Here is a sample mochup I have built:

Any suggestions or solutions will be highly appreciated.

Thanks, Praney

Answer 1

Have a look at the chap links plugin timeline.

http://almende.github.io/chap-links-library/timeline.html

In Particular these demos

http://almende.github.io/chap-links-library/js/timeline/examples/example13_grouping.html http://almende.github.io/chap-links-library/js/timeline/examples/example15_mobile.html

Iv used this plugin before to make a management system, adding editing, drag between groups.