title: jQuery Drag Image to Div
body: <p>I am trying to set up my site to allow an image to be dragged to one of three slots.  The draggable works just fine, but the drop event is not firing.  I tried adding alerts to the drag-stop event to identify if it was dropped on an area, but that always returns false.  I have debugged the javascript, to no avail.  This whole setup happens in a jQuery dialog box, the spans with the main images are hidden and shown based upon a drop down box selection, and the merch_slots div is dynamically setup.  Any help would be appreciated.</p>
  
  <p>If I could get to the point of getting which image was dragged to which slot, I can take care of the rest.</p>
  
  <pre><code>&lt;span id="span_asst" class="merch_image_slots"&gt;
  &lt;img id="image_merch_1" class="merchandiser_image" alt="image" src="images/image_merch_1.jpg" /&gt;
  &lt;img id="image_merch_2" class="merchandiser_image" alt="image" src="images/image_merch_2.jpg" /&gt;
  &lt;img id="image_merch_3" class="merchandiser_image" alt="image" src="images/image_merch_3.jpg" /&gt;
  &lt;/span&gt;
  
  &lt;div class='merch_slots'&gt;
  &lt;div id='selected_item1' class='selected_item'&gt;
  &lt;img height='250' class='droppable' src='images/merchandiser/image1.jpg' /&gt;
  &lt;/div&gt;
  &lt;div id='selected_item2' class='selected_item'&gt;
  &lt;img height='250' class='droppable' src='images/merchandiser/image2.jpg' /&gt;
  &lt;/div&gt;
  &lt;div id='selected_item3' class='selected_item'&gt;
  &lt;img height='250' class='droppable' src='images/merchandiser/image3.jpg' /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  $( ".merchandiser_image" ).draggable({
      revert: "invalid",
      containment: '.container',
      refreshPositions: true,
      cursor: 'move',
      drag: function(event, ui) {
          $('.droppable').addClass('ui-state-highlight');
      },
      stop: function(event, ui) {
          $('.droppable').removeClass('ui-state-highlight');
          if ( $.ui.ddmanager.drop( $(this).data("draggable"), event ) ) {
              alert( 'was dropped' );
          }
          else {
              alert( 'it was not dropped' );
          }
      }
  });
  
  
  $( ".selected_item" ).droppable({
      hoverClass: "ui-state-active",
      drop: function( event, ui ) {
          var targetElem = $(this).attr("id");
          $( this )
          .addClass( "ui-state-highlight" )
          alert(targetElem);
      }
  });
  
  .selected_item
  {
      width:122px;
      height:250px;
      float:left;
      background: white;
      margin-left:2px;
      margin-right:2px;
      border-color: #20548E;
      border-style: solid;
      border-width:2px;
      text-align:center;
      vertical-align:middle;
  }
  
  .merchandiser_image
  {
      margin-left:2px;
      margin-right:2px;
      border-color: #20548E;
      border-style: solid;
      border-width:2px;
      height:250px;
  }
  </code></pre>