hidding a draggable after dropping it (scriptaculous)

Question

probably best if i first just write my code down. i have:

<li class="sorted" id='<%= domid %>'>
    <%= horse.name %>
</li>
<%= draggable_element(domid, :ghosting=>true) %>

after the drop on some "box" the draggable element with name = horse.name stays on it. i want to delete it(the name). i was trying different things.

supposedly i will have to write plain javascript(i am not sure if thats the case but) if i do that i have problems with getting the parent element id that i have to insert in js.

var mydrag = new Draggable(domid, { ghosting: true });
// then destroy it when you don't need it anymore
mydrag.destroy();

how can i get proper domid. sth like this.parentNode.id? i also tried

 <%= draggable_element(domid, :ghosting=>true, :endeffect => "this.hide();") %>

without success.

so my question is how to remove the element after drag?

Answer 1

You can use endeffect, like this:

var mydrag = new Draggable(domid, { ghosting: true, endeffect:function() { $(domid).hide() } });