Drag and Drop widgets are great functionality to let the user control how they wants to see the information as he can arrange various information blocks according to their preference. This type of functionality can be seen in some sites like Netvibes or iGoogle The interface provides the users to move the widgets to his choice and stored them in their database and show the order in which user stored them, I am trying to do this with the help of jQuery and Rails (v=2.3.5).
You can check out the demo http://draggable-app1.heroku.com/home.
You can download the source from http://github.com/spritle/draggable_app
As for the front end, I am using jQuery and jQuery UI javascript plugins, to be frank the front end implementation I took from here, if you want a different interface you can get from nettuts as well.
First Lets go with some details about the app
- This app will contain many widgets in two columns
- Each widget can be collapsed. ( you can add more options like edit, delete, lock etc.)
- Each widget can contain any amount of regular HTML content, text, images, flash etc.
Once we drag and drop a widget in any column an Ajax request will be sent to server and the state will be stored in widget_orders table. So, what columns we have to choose for widget_orders table? Once the drag and drop is completed we are sending the widget names in column1 as one parameter and widgets in column2 as another parameter and this information we can store in the table in two columns.
Now, lets go with generating the widget_order model first (with widget_column1 and widget_column2 as attributes).
[source language=ruby]
ruby script/generate model widget_order widget_column1:string widget_column2:string
[/source]
To list these widgets in the order you can follow the below code
app/views/home/index.html.erb
[source language=ruby]
<% end %>
