Ruby on Rails with Ajax: Modifying the Slide Show

Drag and Drop Everything (Almost Everything) 

We have already displayed a list of thumbnails of all photos that are in the slideshow and 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 photos from the slideshow by dragging its thumbnail from the slideshow and dropping 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 that in a very small amount of code. We will add a mere 58 lines of Ruby code to the models and controllers, 47 lines to the view templates, and 16 lines to our 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

Let's start by updating the slideshow's edit template. Edit photos/app/views/slideshows/edit.rhtml to look like this:

  <h1>Editing slideshow</h1>

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

  <div id='slideshow-photo-picker'>
    <p style='text-align: center;'><b>Unused Photos</b></p>
    <div id='slideshow-photos'>
      <%= render :partial => 'photo_picker' %>
    </div>
  </div>

  <div id='slideshow-attributes'>
    <p><%= link_to 'Play this Slideshow', :action => 'show', :id => @slideshow %></p>
    <div style='border: thin solid; padding-left: 1em;'>
      <p style='text-align: center;'><b>Attributes</b></p>
      <%= start_form_tag :action => 'update', :id => @slideshow %>
        <%= render :partial => 'form' %>
        <%= submit_tag 'Save Attributes' %>
      <%= end_form_tag %>
    </div>
    <p>
      <b>Hint:</b> Drag and drop photos between the
      two lists to add and remove photos from the
      slideshow. Drag photos within the slideshow to
      rearrange their order.
    </p>
  </div>

  <%= drop_receiving_element("slideshow-contents",
            :update => "slideshow-thumbs",
            :url => {:action => "add_photo" },
            :accept => "photos",
            :droponempty => "true",
            :loading => visual_effect(:fade),
            :complete => visual_effect(:highlight, 'sortable_thumbs')
            ) %>

This file has been almost entirely rewritten, so there are no marked-as-changed lines. You can see that I have laid out this edit page into three sections:

  <div id='slideshow-contents'> . . . </div>
  <div id='slideshow-photo-picker'> . . . </div>
  <div id='slideshow-attributes'> . . . </div>

Only the slideshow-photo-picker is new. It shows the list of unused photos that can be added to the slideshow. We will set up the CSS stylesheet to display these sections side-by-side as you saw them in Figure 6-4.

slideshow-contents is rendered by the partial template show_slides_draggable,
slideshow-photo-picker is rendered by the partial template photo_picker, and slideshow-attributes is mostly rendered by the form partial template that was generated from the scaffolding. I say "mostly" because I added a few things inline around the rendering of form.