Solved

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

Posted on 2008-06-10
6
726 Views
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
0
Comment
Question by:vibrazy
[X]
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
6 Comments
 
LVL 9

Assisted Solution

by:zemond
zemond earned 500 total points
ID: 21751537
0
 
LVL 5

Author Comment

by:vibrazy
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?

Regards,
Vibrazy
0
 
LVL 9

Assisted Solution

by:zemond
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

 http://interface.eyecon.ro/demos/sort.html

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
0
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!

 
LVL 5

Author Comment

by:vibrazy
ID: 21758715
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

0
 
LVL 5

Accepted Solution

by:
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?

Regards,
Vibrazy


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

0
 

Expert Comment

by:hindersaliva
ID: 32810811
vibrazy,

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

Regards,
Hinder

0

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

749 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