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

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

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!



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



def remove_slide
slideshow_id = session[:slideshow].id
slide_id = params[:id].split(“_”)[1]
@slideshow = Slideshow.find(slideshow_id)
session[:slideshow] = @slideshow
@photos = unused_photos(@slideshow)
render_partial ‘photo_picker’

drop_receiving_element is the AJAX helper that calls the remove_slide


“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’)
) %>