Drag and Drop :complete

rubyonrails-talk
1

I've successfully setup some drag-and-drop categorization in a new app I'm working on, though I'm getting tripped up by Prototype accessors it seems.

On complete of the drag and drop process, I want to change the background color of a div nested inside the main div defined as the draggable_element.

Here's a sample from the view...

<% entry_id = "entry_#{entry.id}" %>        <div class="<%= cycle('odd', 'even') %>" id="<%= entry_id %>">        <div class="entry_cat">&nbsp;</div> ....

On complete of the drag and drop, I want to change the background color of "entry_cat," though I'm having trouble accessing it.

:complete => "alert('here is the entry id: ' + element.id)" - successfully gets me the element id of the div I dragged, which is good...

I would expect to be able to use something like this to change the background color of "entry_cat" but it doesn't work...

:complete => "element.getElementsByClassName('entry_cat').setStyle({backgroundColor: 'red'})"

What am I doing wrong? How would I access the "entry_cat" div for the dragged element and update the background color?

Any help would be greatly appreciated.

Thanks, -Alex

2

I think you should try using with id="entry_cat" and then use getElementById('entry_cat') to change the color of the <div>

3

Hi Ashutosh,

I tried that and it didn't work. Here's what I've done so far with what's worked and what hasn't. "entry_cat" is setup now as a div with an id, rather then a class. I'm trying, on :complete, to simply pop an alert window with something to indicate success (i.e. that i'm actually accessing the entry_cat id which is what I'm shooting for) and I'm clearly not getting it.

This works to return the parent dragabble div's ID :complete => "alert('here is the entry id: ' + element.id)" - returns for instance, 'entry_4'

These both fail: :complete => "alert(element.id.getElementById('entry_cat').getStyle('background- color') - failed, that's clearly not the right accessor :complete => "alert(element.getElementById('entry_cat').getStyle('background- color') - failed, that's clearly not the right accessor

This works, but returns the first entry_cat on the page, not necessarily the one that belongs to the dragged div :complete => "alert($('entry_cat').getStyle('background-color'))" - this works, but gives me the first one, not necessarily the one associated with the div I dragged

Looking to access div:entry_4 -> div:entry_cat

Any other ideas?

-A

4

Couple of questions, what are your 'draggable_element's and 'drop_receiving_element'? If you want to highlight the specific entry you've edited you'll likely want to setup some RJS in your controller instead of in the complete line...

If you want to highlight a div not associated with a specific entry id... :complete => "$('div_id_to_highlight').addClassName('active');"

Otherwise in your controller in the update method

respond_to do |format|   format.js {     render :update do |page|       page.visual_effect :highlight, "entry_#{@entry.id}"     end   } end

5

Hi Dave,

Let me answer you questions to see if you can help...

I have a number of categories, listed in at _categories.html.erb template. Here's how they're generated in the template (this is where the drop takes place):

        <% for category in @categories %>           <li id="<%= category.category.name %>" style="background: <%= category.category.color %>;"><%= link_to category.category.name, :controller => 'categories', :action => 'index', :id => category.category.name %></li>

          <%= drop_receiving_element(category.category.name,             :onHover => "function() { $ ('#{category.category.name}').highlight() }",             :with => "'entry=' + (element.id.split('_').last()) + '&user='               + #{@user} + '&category=' + #{category.category.id}",             :url => {:action =>:entry_categorize},             :complete => "?"           )%>

        <% end %>

I put a "?" for the complete action, because I don't know what to do here. I want the complete action to change the background color of "entry_cat" below to match the category background color. Here is where the entries are generated. These are the draggables:

      <% for entry in entries %>         <% entry_id = "entry_#{entry.id}" %>

          <div class="<%= cycle('odd', 'even') %>" id="<%= entry_id %>">             <div id="entry_cat" class="float_left"               <% unless entry.entry_category.nil? %>                 style="background-color:                   <%= entry.entry_category.category.color %>;"               <% end %>>&nbsp;</div>             <span class="entry_time">               <%=h entry.created_at.to_s(:time) %>             </span>             <span class="entry_name">               <%=h entry.item_name %>             </span>             <span>               <%= entry.price %>             </span>           </div>           <div class="clear"></div>

        <%= draggable_element(entry_id, :revert=>true) %>       <% end %>   <% end %>

How would I go about updating the 'entry_cat' background color on complete of a successful drag and drop for the specific entry that was dragged only? This is where I'm having trouble. Let me know if you have any other questions and thanks for the help so far.

Thanks, -A

6

? == $(#{entry_id}).setStyle({backgroundColor: '#900'});