/    Sign up×
Community /Pin to ProfileBookmark

Web 2.0 layout – drag and drop

Copy linkTweet thisAlerts:
Feb 29.2008

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

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@s_b37Mar 01.2008 — 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.
Copy linkTweet thisAlerts:
@mattasticauthorMar 01.2008 — 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?
Copy linkTweet thisAlerts:
@LeonsbuddydaveMar 01.2008 — 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. ?
Copy linkTweet thisAlerts:
@s_b37Mar 02.2008 — 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.
Copy linkTweet thisAlerts:
@demodavMar 04.2010 — 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.
×

Success!

Help @mattastic spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...