asked on

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

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

SOLUTION

zemond

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

vibrazy

ASKER

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?

Regards,
Vibrazy

SOLUTION

zemond

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

vibrazy

ASKER

Hi zemond,

Thanks for helping me on this one.

Here is what I have so far.

http://lottohotshots.rafflepixel.com/

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.

Regards,
Vibrazy

ASKER CERTIFIED SOLUTION

vibrazy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hindersaliva

vibrazy,

Have you seen this?
http://www.webdesignermag.co.uk/blog/build-the-bbc/

Regards,
Hinder