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:
-
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. -
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. -
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’)
) %>