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
727 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
MS Dynamics Made Instantly Simpler

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

 
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

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