Drag and Drop :complete

Rails
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}” %>


 

…

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

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

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 %>

      <%=

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

5

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

6

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