# Drag and Drop :complete

**URL:** <https://www.ruby-forum.com/t/drag-and-drop-complete/146918>\
**Category:** Rails\
**Created:** [August 26, 2008, 7:38pm UTC](https://www.ruby-forum.com/t/drag-and-drop-complete/146918 "2008-08-26T19:38:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ressister](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/258eb7/32.png) [@ressister](https://www.ruby-forum.com/u/ressister)\
**Post date:** [August 26, 2008, 7:38pm UTC](https://www.ruby-forum.com/t/drag-and-drop-complete/146918/1 "2008-08-26T19:38:19Z")

</div>

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

  

&nbsp;
  
…

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

---

<div class="post-metadata">

**Author:** ![ressister](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/258eb7/32.png) [@ressister](https://www.ruby-forum.com/u/ressister)\
**Post date:** [August 26, 2008, 8:36pm UTC](https://www.ruby-forum.com/t/drag-and-drop-complete/146918/2 "2008-08-26T20:36:54Z")

</div>

I think you should try using with id=“entry\_cat” and then use  
getElementById(‘entry\_cat’) to change the color of the

---

<div class="post-metadata">

**Author:** ![ressister](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/258eb7/32.png) [@ressister](https://www.ruby-forum.com/u/ressister)\
**Post date:** [August 26, 2008, 9:50pm UTC](https://www.ruby-forum.com/t/drag-and-drop-complete/146918/3 "2008-08-26T21:50:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ressister](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/258eb7/32.png) [@ressister](https://www.ruby-forum.com/u/ressister)\
**Post date:** [August 27, 2008, 4:44pm UTC](https://www.ruby-forum.com/t/drag-and-drop-complete/146918/4 "2008-08-27T16:44:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ressister](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/258eb7/32.png) [@ressister](https://www.ruby-forum.com/u/ressister)\
**Post date:** [August 28, 2008, 1:10pm UTC](https://www.ruby-forum.com/t/drag-and-drop-complete/146918/5 "2008-08-28T13:10:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ressister](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/258eb7/32.png) [@ressister](https://www.ruby-forum.com/u/ressister)\
**Post date:** [August 27, 2008, 1:22pm UTC](https://www.ruby-forum.com/t/drag-and-drop-complete/146918/6 "2008-08-27T13:22:29Z")

</div>

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