Drag-n-Drop Web Components using jQuery & Rails

1 min read

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]

<% @col1.each do |item|%>

You can place the widget information here.( you can show images,flash or anything else)

<% end %>

<% @col2.each do |item|%>

You can place the widget information here.( you can show images,flash or anything else)

<% end %>

[/source]
This is the how we are sending the Ajax request after dragging and dropping the widgets, on drag-n-drop complete
app/views/home/index.html.erb
[source language=”ruby”]
$.ajax({
type: ‘get’,
url: ‘/home/save_widgets_state’,
dataType: ‘script’,
data: ‘SortOrder: ‘+sortorder,
complete: function(){
}
[/source]
This is the Controller with two actions index and save_widgets_state, index action is the main page and save_widgets_state is the ajax function that will be called after drag-n-dropping a widget.
app/controllers/home_controller
[source language=”ruby”]
layout false
def index
widget = WidgetOrder.last
@col1 = widget.column1.split(“,”)
@col2 = widget.column2.split(“,”)
respond_to do |format|
format.html # index.html.erb
format.xml { render :xml => @tasks }
end
end
def save_widgets_state
widget = WidgetOrder.first
widget.column1 = params[‘SortOrder: column1’.to_sym]
widget.column2 = params[:column2]
widget.save
render :nothing => true
end
[/source]
I hope you would find this code/blog useful, if you have some other nice solution please let me know.

Related posts:

Leave a Reply

Your email address will not be published. Required fields are marked *