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
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 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
Independent Software Vendors: 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!


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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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

770 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