Web 2.0 layout - drag and drop

[mattastic]

Hi Folks,

Are there any tutorials on how to go about creating an interface, where users can customise content and display whats relevant?

Big sites like yahoo, myspace, facebook, bbc all do this.

Are there any tutorials on how to go about it?

I have basic knowledge of AJAX and XMLHttpRequest

Thanks in advance

[s.b37]

Um that's a very broad question.

What exactly do you want to make? A webpage, an application, a forum?

Most likely, you will need to learn a server-side language (such as PHP or ASP, go to http://w3schools.com/) and SQL for database access.

You need to be much more specific about what exactly you want to do.

[mattastic]

Thanks for your reply.

I just want to create a webpage where users can move around elements and hide/ show content thats relevant to them.

Like the new http://www.bbc.co.uk homepage.

Users can drag elements around the page, that 'snap' into place. The layout is saved to a cookie for next time they visit the site.

I've found some basic drag and drop javascript tutorials, but nothing of any detail.

I've read the next release of Adobe's SPRY framework will have drag and drop but I'd like to do something myself.

Can anyone point me in the right direction?

[Leonsbuddydave]

Try http://www.walterzorn.com/dragdrop/dragdrop_e.htm

It has some really good drag and drop, and for the hiding and showing you could use style.display = "none" or "block";. I'm currently working on a page that implements all of that, but its at about 5000 lines of code right now, so I'm not even going to try to post that.

[s.b37]

jQuery is a very nice library, which allows you to do many interface stuff.

Go to http://jquery.com/ for more information.

For an example, with source code, go to http://sonspring.com/journal/jquery-portlets

Note, the example doesn't use cookies to save state, but that is relatively simple. I'm assuming you know javascript (if you want to create something as complicated as this).

To save state, get any cookie set of functions (such as a jQuery plugin, or just a group of functions), and set a cookie to store state, every time the layout is changed. Then when the page is opened, read the cookie, and lay out the page appropriately.

[demodav]

http://www.bbc.co.uk/glow/

PS. when writting scripts.

Don't forget to do

<script type="text/javascript">

glow.ready(function(){ write your script here }

</script>

It will save you an hour trying to find the solution.