I’ve been working on yet another rails project lately, and, as usual, having a lot of fun with it. I bumped into a bit of a limitation though, in the default setup. Namely, that it’s difficult to pass much information between draggables and droppables. For example, if you look at the scriptaculous demo here:

http://demo.script.aculo.us/shop

You’ll see that Rails receives and deals with the element that was dragged and dropped in sort of a hacky way, in the add method:

product_id = params[:id].split("_")[1]

In other words to get the product ID, you have to hack the string!

Well, that’s certainly not very elegant. I’m not sure I would consider my own solution “beautiful” either, but it does have the potential to let you pass multiple values, and do so in a way that doesn’t involve chopping up strings in the controller portion of the code (which ought to be dealing with logic, not how to pick strings apart). Most importantly, you can pass values that are decoupled from the html element id used as a draggable element.

def draggable_dest()
  return "'sourceid=' + element.sourceid + '&sourceobj=' + element.sourceobj"
end

def draggable_source(htmlid, obj)
  javascript_tag "e = $('#{htmlid}') ; e.sourceid = '#{htmlid}'; e.sourceobj = #{obj.id}"
end

I created these in the application_helper.rb file, so that I can use them whereever I need. They are used like so:

<%= drop_receiving_element('current', :url => { :action => "replace_current",
                         :destid => 'current', :destobj => @current.id },
                         :with => draggable_dest()) %>

This sets up the action of the receiving element with the destination’s html element id, and an ActiveRecord object id, as well as the :with tag that knows how to grab the information we pass from the draggable element:

<%= draggable_element("mytask", :revert => true) %>
<%= draggable_source("mytask", t) %>

What’s happening here is that first, we create a draggable element with the regular Rails method, but then we apply the secret sauce, defined above, that loads the html element id, and the object id into the draggable element, so that when it lands on the receiving element, the parameters we set up get passed on.

This is a rough idea at this point, as I only figured out how to do what I wanted yesterday. Potential improvements include passing arbitrary parameters, as well as integrating the whole thing somewhere “upstream”, which is something I wanted to avoid for my initial attempt, so as not to lock myself into a hacked, local version of Rails. In any case, I hope you enjoy it.