# Ajax Drag & Drop not updating (Up & Running Tutorial)

**URL:** <https://www.ruby-forum.com/t/ajax-drag-drop-not-updating-up-running-tutorial/82883>\
**Category:** Rails\
**Created:** [January 22, 2007, 3:05am UTC](https://www.ruby-forum.com/t/ajax-drag-drop-not-updating-up-running-tutorial/82883 "2007-01-22T03:05:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ricklach](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/47e85d/32.png) [@ricklach](https://www.ruby-forum.com/u/ricklach)\
**Post date:** [January 22, 2007, 3:05am UTC](https://www.ruby-forum.com/t/ajax-drag-drop-not-updating-up-running-tutorial/82883/1 "2007-01-22T03:05:20Z")

</div>

Hi Everybody,  
I’ve been working through the O’Reilly Ruby on Rails: Up and Running  
book, and I’m having some problems with the Drag and Drop feature. I’ve  
gone over it several times, and I’m quite sure that my code is identical  
to that displayed in the book, but the application is not running as  
expected. I’ve been stumped on this for a few days now, so I thought I  
would see if anybody has encountered this issue when working through the  
tutorial and if anybody else might be able to help.

If you’re not familiar with the book’s tutorial, let me describe what  
this application is supposed to do or the expected behavior [note: It  
uses prototype.js, and effects.js and dragdrop.js from [Script.aculo.us](http://Script.aculo.us);  
Also, I’m running Rails 1.1.2]:

There’s a Slideshow Photos column and an Unused Photos column (by column  
I mean divs or tables–areas on the page). You’re supposed to be able  
to drag photos(thumbnails) back and forth between these two columns  
(divs) and each time you do that, it’s supposed to call either add\_photo  
or remove\_slide and update the columns appropriately. Also, you should  
be able to drag slides(thumbnails) in the Slideshow Photos column up and  
down to alter the order of slides in the slideshow.

Here’s the behavior I’m observing:

1. Before dragging and dropping anything, everything looks fine; I can  
drag slides within the Slideshow Photos up and down to change the order;  
I can drag either the slide thumbnails or the photo thumbnails (in the  
Unused Photos column) all over the page, but they won’t stay there if I  
try to drop them outside of the div that is allowed to accept them–they  
just spring back to their starting spot. This is exactly as expected and  
there’s no problem here.

2. Dragging photos(thumbnails) from the Unused Photos column to the  
Slideshow Photos column creates no problems whatsoever. I can do this  
repeatedly and it works as expected: the thumbnail gets added to the  
Slideshow Photos column as a slide and at the same time it disappears  
from the Unused Photos column.

3. The problem starts once I drag a slide (thumbnail) from the Slideshow  
Photos column to the Unused Photos column. The first time it works  
correctly. I can drag a slide over, hold it over the Unused Photos  
column, and it will fade slightly as it’s supposed to and once I drop  
it, both columns update appropriately (the thumbnail disappears from the  
Slideshow Photos column and appears in the Unused Photos column). But  
after that first time, everything sort of goes berserk.

First of all, pictures in neither column spring back to where they’re  
supposed to be. I can now drag a thumbnail or a slide all over the page  
and drop it anywhere–it doesn’t spring back.

When I drag a slide over to the Unused Photos column (or drag a photo to  
the Slideshow Photos column)–the div that receives it, it no longer  
fades.

If I drag and drop another slide from the Slideshow Photos column to the  
Unused Photos column, the Unused Photos column will update but the slide  
that was dragged over doesn’t disappear. It just gets sent backward so  
it’s behind the other thumbnails after they’ve updated. And the  
Slideshow Photos column doesn’t update, so it has gaps wherever I’ve  
dragged a slide away.

If I drag and drop a photo into the Slideshow Photos column, the  
Slideshow Photos column will update, but the photo that was dragged over  
doesn’t disappear or move. I can pick it up again and drag and drop it  
anywhere on the page. I can drop it on the Slideshow Photos column  
again and again (and get a lot of duplicate slides). Also, the Unused  
Photos column doesn’t update when I drag a photo from it and drop it  
onto the Slideshow Photos column.

I think that describes it! So to summarize, it works fine just the  
first time and then everything gets screwy. Why is that?

I’d appreciate any suggestions. Thanks so much!

Rick

CODE:

# remove\_slide is the method in the controller that is called when a

slide is

# dragged from the Slideshow Photos column and dropped into the Unused

Photos

# column

def remove\_slide  
slideshow\_id = session[:slideshow].id  
slide\_id = params[:id].split(“\_”)[1]  
Slide.delete(slide\_id)  
@slideshow = Slideshow.find(slideshow\_id)  
session[:slideshow] = @slideshow  
@photos = unused\_photos(@slideshow)  
render\_partial ‘photo\_picker’  
end

# drop\_receiving\_element is the AJAX helper that calls the remove\_slide

method.

# “slideshow-photo-picker” and “slideshow-photos” describe the divs that

# contain the Unused Photos column

\<%= drop\_receiving\_element(“slideshow-photo-picker”,  
:update =\> “slideshow-photos”,  
:url =\> {:action =\> “remove\_slide”},  
:accept =\> “slides”,  
:droponempty =\> “true”,  
:loading =\> visual\_effect(:fade),  
:complete =\> visual\_effect(:highlight, ‘slideshow\_photos’)  
) %\>