Rails: Up and Running, 2nd Edition

Drag-and-Drop Everything (Almost Everything)

We have already displayed a list of thumbnails of all photos that are in the slideshow and have enabled the user to drag them around to rearrange their order in the slideshow. Now, let’s add a second list of thumbnails, showing all photos that are not being used in the slideshow.

We’ll let the user add a photo to the slideshow by dragging it from the list of unused photos and dropping it onto the slideshow thumbnails. Similarly, we can enable the user to remove a photo from the slideshow by dragging its thumbnail from the slideshow and dropping it on the unused photos list. Finally, we’ll allow the user to filter the unused photos list by category.

As you might expect, we can accomplish all of that in a very small amount of code. We will add fewer than 100 lines of code to the models, controllers, view templates, and CSS stylesheet. Figure 6-4 gives you a preview of how this is going to look when we’re done.

Figure 6-4. Preview of drag-and-drop slideshow editing

We’re going to work in reverse, starting at the view and working back toward the controller. Let’s start by updating the slideshow’s edit template. Edit app/views/slideshows/edit.html.erb to look like this.

<h1>Editing slideshow</h1> <div id='slideshow-contents'> <p style='text-align:center;'><b>Slideshow Photos</b></p> <div id='showshow-thumbs'> <%= render :partial => 'show_slides_draggable' ...