jQuery ui droppable not firing

Question

I'm trying to build a drag-drop system where images can be dragged into a particular div. Because the images are in a scroller, I have to use clone for the draggables. The problem I have is that the 'drop' event doesn't seem to be fired when I drag the image onto the div. I've searched online, but haven't found a solution which works.

I have the following:

$( "#droppable" ).droppable({
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
    alert('ok');
  }
});

$( ".draggable" ).draggable({ 
  helper: "clone", 
  scroll: false
});

so that when the .draggable element is dropped on the #droppable div, I should see an alert. The droppable does get the activeClass, so it's getting that far, but when I drop the image, nothing happens - it just disappears.

The html is:

For the droppable (it's in a scrollable div, using the jQuery ui scrollable):

<div class="scrollable" id="scrollable">
  <div id="scrollable-items" class="items">
    <div id="scrollerDiv_1">
      <div>
        <div id="droppable" class="droppable ui-droppable">
          <div class="ImageArea"></div>
          <div class="CaptionArea">Drag a photo or video into the box above to create a new frame</div>
        </div>
      </div>
    </div>
  </div>
</div>

For the draggable images:

<div id="EditMain">
  <div id="libraryMain">
    <div id="my-asset-list" class="assetList">
      <div class="listItem draggable scroll-content-item ui-draggable">
        <span class="assetItem">
          <img src="xxx"/>
        </span>
      </div>
      <div class="listItem draggable scroll-content-item ui-draggable">
        <span class="assetItem">
          <img src="xxx"/>
        </span>
      </div>
      <div class="listItem draggable scroll-content-item ui-draggable">
        <span class="assetItem">
          <img src="xxx"/>
        </span>
      </div>
    </div>
  </div>
</div>

Answer 1

Got it working - thanks for the help.

Once I realised it was working for others, I figured it had to be a clash with something else - and sure enough, there was another 'droppable' script, which I'd put in ages ago and forgotten about. Removed that, and all works fine.

Answer 2

in the drop function, you need to append the dropped item into the container:

drop: function(event, ui) {
    $('#mycontainer').append(ui.draggable);
    return true;
}

The return value indicates whether the drop was successful or not.