Home / jQuery / Draggable Timeline Panels using jQuery

Draggable Timeline Panels using jQuery

Timeline has been extensively come into use in various flavors and styles. Facebook’s timeline style is very much useful in finding stuff based on the year of posting but doesn’t let you change the date if required. How about a timeline design that can be dragged and dropped as per your desire? This must be the one of the best you are searching for.. Let’s get started…

In this demonstration I’ve used Twitter Bootstrap CSS, So I hope you will find the mark up easier to understand and the CSS too.

In the following Markup only a part of the mark up is shown because of the size.

Note that there is sortable-column class defined in the first parent div. This class has been assigned sortable function in the javascript which will be shown the end of the tutorial.

The above mark up will only generate the panel header containing the panel label and the date pulled to right. The body of the panel goes as follows

The above mark up code fits to the panel header and contents can be flooded into it. For demonstration I’ve used image gallery (Does not include Modal Box).

Since the CSS is too large to be displayed here and I know nobody goes through the CSS 😛 So lets skip to the heart of the system. Yes, the jQuery!

Having the sortable function enabled we need to connect the panel header (with class name) and assign a revert value which determines the time of the panel to come back to its original position if the the panel wasn’t dropped at the proper droppable location. If the drop was successful then remove dragging class using ui.item.removeClass(‘dragging’).

Addition of components are not limited to images and text alone, you can add tabs texareas and much more.

That’s it! We are ready to give a try… This can also be achieved using PHP to permanently define a position.

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Private chatroom using socket.io, NodeJS and MySQL

As I promised to write a tutorial on Private chatroom with MySQL DB in the …

  • Andrew O’Melia

    “This can also be achieved using PHP to permanently define a position.” – That would be amazing. Can you give me a hint as to what attribute to affect with my php to maintain position after client drag-drop? A second question is I’m attempting to convert the timeline to horizontal display. Any quick tips there?

    • Add a column to your table say ‘order’. Whenever you insert a record to your table insert a number in ‘order’ field. When you fetch them to the browser assign numbers to each div say where ‘n’ is the order number. Write an ajax function on the drop event in the jQuery. But make sure you find the position (number) where you drop your div element. Update your record’s ‘order’ field via ajax!

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!