title: jquery ui draggable - clone does not work
body: <p>I'm using jquery 1.8.3 and jquery-ui-1.9.1.  In the code below, I have 3 choices for the user. Depending upon their choice, 5 images are displayed.  One of these images can then be dragged into the preview window.  If the user changes his/her mind, they can drag another image onto the preview window, which will replace the first one.  What does not work now is using the "clone" helper option.  If I drag an image onto the preview window it completely disappears.  Once I take the "clone" option out, the image drops in fine, but I also want it to stay in its original spot. I have checked all the other similar questions on the board, but none works for me.  I've tested in both FF and IE latest versions.</p>
  
  <p>Here is the first bit of code displaying the 3 options:</p>
  
  <pre><code>&lt;div id="choices"&gt;
      &lt;ul&gt;
          &lt;li id="birthdaychoice"&gt;&lt;a href="#"&gt;Birthday&lt;/a&gt;&lt;/li&gt;
         &lt;li id="plainchoice"&gt;&lt;a href="#"&gt;Plain&lt;/a&gt;&lt;/li&gt;
        &lt;li id="flowerschoice"&gt;&lt;a href="#"&gt;Flowers&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Next comes the code for each of the choices, displaying the correct set of images.  I've only put one of the choices below for brevity's sake.</p>
  
  <pre><code>&lt;div id="makeMeDraggable"&gt;
      &lt;div id="birthday"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;img src="images/stationery/tooltips/christmastooltip.png" width="68" height="80" alt="Slide 1" /&gt;&lt;/li&gt;
             &lt;li&gt;&lt;img src="images/stationery/tooltips/eastertooltip.png" width="68" height="80" alt="Slide 2" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/stationery/tooltips/footballtooltip.png" width="68" height="80" alt="Slide 3" /&gt;&lt;/li&gt;
           &lt;/ul&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>And now here is the js code:</p>
  
  <pre><code>$("#birthday li").draggable({
    helper: 'clone',
    containment: '#preview',
    cursor: 'move',
    appendTo: 'body'
  });
  
  
  $("#preview").droppable({
     accept: '.draggable',
     activeClass: "custom-state-active",
     drop: function( event, ui ) {
       $(this).append($(ui.draggable).clone());
             //    $item.appendTo("#preview");
             //   $(ui.draggable).attr('src','image/10.jpg');
      }
          });
  </code></pre>
  
  <p>Any idea how to remedy this?</p>