开发者

How to implement something like www.igoogle.com?

开发者 https://www.devze.com 2022-12-13 18:39 出处:网络
The main problem is: How do they deal with the intersection of two blocks? EDIT Javascript is one thing,th开发者_开发技巧e other thing is:

The main problem is:

How do they deal with the intersection of two blocks?

EDIT

Javascript is one thing,th开发者_开发技巧e other thing is:

how do they remember the position of each block?


Here is the one solution:

Igoogle Interface


I assume when you say "blocks", you're asking about the dragging/dropping functionality of the various little widgets on that page.

This is accomplished via Javascript, and there are many implementations out there for dragging and dropping. Jquery is an extremely popular Javascript library, and you can get JQuery UI with it that has the Droppable interaction.

Googling will find you many others if you search using "dragging" and "dropping".


an amazing solution that I once used: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/


It gets somewhat complicated. You're best off using one of the well-known JS frameworks available that can handle complex drag-n-drop. The ones I'm most familiar with are YUI and Ext JS, both of which can support the creation of portal-style pages. I'm sure that Dojo and others do as well. Even if you want to implement it on your own, I'd still look at those implementations for guidance on how they do drag and drop.

Ext JS also has a portal layout example that is a great starting point for this type of project. There are also some general examples of advanced drag-drop, as well as some tutorials that might be helpful. Again, I'm sure other frameworks have similar resources. Warning: if you are new to drag-drop, then creating a drag-drop portal page like this is not the easiest thing to dive into from scratch, but it's certainly doable.


http://www.codeplex.com/dropthings/

and demo: http://dropthings.omaralzabir.com/


http://www.webappers.com/2008/11/19/how-to-create-igoogle-interface-with-jquery/

THe link is not working. Please check.

0

精彩评论

暂无评论...
验证码 换一张
取 消