[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


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

Posted on 2008-06-10
Medium Priority
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 www.bbc.co.uk 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
  • 3
  • 2

Assisted Solution

zemond earned 2000 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 2000 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.


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 www.jquery.com, 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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Suggested Courses

873 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