# Ajax drag-and-drop issue

**URL:** <https://www.ruby-forum.com/t/ajax-drag-and-drop-issue/70279>\
**Category:** Rails\
**Created:** [September 27, 2006, 10:45pm UTC](https://www.ruby-forum.com/t/ajax-drag-and-drop-issue/70279 "2006-09-27T22:45:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mike](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/58f4c7/32.png) [@mike](https://www.ruby-forum.com/u/mike)\
**Post date:** [September 27, 2006, 10:45pm UTC](https://www.ruby-forum.com/t/ajax-drag-and-drop-issue/70279/1 "2006-09-27T22:45:29Z")

</div>

Hey there.

I’m doing something similiar to the demo shopping cart at  
([http://demo.script.aculo.us/shop](http://demo.script.aculo.us/shop)), but with some differences. When you  
drag an item to the div, it doesn’t return to the original location, as  
you can only drag one of each item. Also I don’t want to have a separate  
container to drag deleted items to, so I have a remove link under each  
item. I think the significant difference though, is the fact that my  
draggable is a div, with text and an image, and not just an image like  
the [script.aculo.us](http://script.aculo.us) demo.

When a user clicks remove, this RJS template is called:

page.visual\_effect :squish, “item-#{@item.id}”, :duration =\> 0.6  
page.insert\_html :bottom, :items, :partial =\> ‘item\_display’

To show the original item for further dragging. Here’s where the problem  
comes in:

I can subsequently drag the item back in FireFox, but not in Safari or  
IE. The item just isn’t draggable even though my \_item\_display partial  
is the same thing that was rendered when the page loaded, and dragging  
worked then no problem. Also, just so you know, items is a div element  
that the item is inserted into.

If I refresh the page, all is well.

Anyone run into this?

Thanks!

---

<div class="post-metadata">

**Author:** ![mike](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/58f4c7/32.png) [@mike](https://www.ruby-forum.com/u/mike)\
**Post date:** [September 28, 2006, 8:20am UTC](https://www.ruby-forum.com/t/ajax-drag-and-drop-issue/70279/2 "2006-09-28T08:20:45Z")

</div>

I figured it out. The element isn’t actually getting destroyed from the  
page. So instead of reinserting a new element, you should just show the  
element that was hidden when dragging.

Mike wrote:

> Hey there.
> 
> I’m doing something similiar to the demo shopping cart at  
> ([http://demo.script.aculo.us/shop](http://demo.script.aculo.us/shop)), but with some differences. When you  
> drag an item to the div, it doesn’t return to the original location, as  
> you can only drag one of each item. Also I don’t want to have a separate  
> container to drag deleted items to, so I have a remove link under each  
> item. I think the significant difference though, is the fact that my  
> draggable is a div, with text and an image, and not just an image like  
> the [script.aculo.us](http://script.aculo.us) demo.
> 
> When a user clicks remove, this RJS template is called:
> 
> page.visual\_effect :squish, “item-#{@item.id}”, :duration =\> 0.6  
> page.insert\_html :bottom, :items, :partial =\> ‘item\_display’
> 
> To show the original item for further dragging. Here’s where the problem  
> comes in:
> 
> I can subsequently drag the item back in FireFox, but not in Safari or  
> IE. The item just isn’t draggable even though my \_item\_display partial  
> is the same thing that was rendered when the page loaded, and dragging  
> worked then no problem. Also, just so you know, items is a div element  
> that the item is inserted into.
> 
> If I refresh the page, all is well.
> 
> Anyone run into this?
> 
> Thanks!