Any ideas how to develop draggable controls in Jquery with the same functionality of the website?

Posted on 2008-06-10
Last Modified: 2008-06-24
Hi Experts,

I was just wondering if anyone have links to tutorials or snipped of codes that would assist me in making draggable controls like the website.

What I would like to create is the following:
- In the website I am creating I will have 3 columns.
- The left handside panel and the right handside panels will need to be Draggable.
- There will be able 5 panels in each side.
- They will also need to have an edit link, that will permorm the same effect as the bbc website.
- Once the user clicks edit, then a Modal screen will show over the content, saying "Successfull".

I am not after a solution because I would like to learn this myself, but I am after a starting point. If anyone have links to tutorials, snippets of code, it would be much appreciated
Question by:vibrazy
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2

Assisted Solution

zemond earned 500 total points
ID: 21751537

Author Comment

ID: 21752583
Hi zemond,

I've been reading the jquery site, I was after a more specific tutorial.

I have been playing around with ui.sortables, got everything to be draggable etc.

Now I am after saving the data into a Mysql DB and Cookie, so if the user returns I can get the order from the cookie and/or db.

And also a snipped in how to re-order the list once I gather the order from cookie/db.

Any ideas?


Assisted Solution

zemond earned 500 total points
ID: 21758412
Gday vibrazy, I personaly have never done this so I can only tell you what I would do.

check out

After a movement is complete (im sure there is a handler for it), you simply need to do a ajax call to a document and parse the serialzed data through which then could be saved into your db for members or set to a cookie for non members,

I would assume it would be simple enough to read this serialized data and display each section as orded.

If you need a more specific answer, Ill see what I can whip up for you
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.


Author Comment

ID: 21758715
Hi zemond,

Thanks for helping me on this one.

Here is what I have so far.

I recken is 80% done, if you could help me with the 20% i would appreciate it.

Have a look at the link, basically I have everything done, the things left are:
1 - When the user comes in, check for the cookie.
   1.1 - If the cookie doesnt exist, load the normal order of the draggable elements
   1.2 - If the cookie is present, then order the draggable elements to the correct place (<<This is where i need some snipped code, or tutorial)
2 - When the user finishes dragging the element
   2.1 - Save it to the database
   2.2 - Save the cookie (<<This is where i need help)

So Basically, what I am after is some snipped to save cookie in Jquery, and also to re-order the the list depending with the cookie.

Thanks again for taking time and helping me with this one.



Accepted Solution

vibrazy earned 0 total points
ID: 21758863
Hi zemond,

Downloaded a cookie plugin from, and got it so it saves the cookie after the user finishes dragging the panels.

Just need now, onbody load, to re-order the tabs from the saved cookie.

Any ideas?


update:function() {
//set cookie with the order of panel for 10 days
$.cookie("ordered_panels",$(this).sortable("toArray"),{ path: '/', expires: 60});

Open in new window


Expert Comment

ID: 32810811

Have you seen this?



Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

689 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question