Jquery ui draggable cannot de dropped in elements defined at 'appendTo'?

I have some images in a container, they're all draggable, and bellow there's some droppable containers with the class "container".

The draggable have defined "snap" to ".container".

The problem is that the draggable never drops if its "snapped" to the container, if I remove the "snap" property the problem is solved but I'd really like to snap the draggables, before they drop

The image on the left doesn't drop (is snapped), the image on the right drops ok.

I'd appreciate any idea

CODE:

--draggable
$('#' + this.Id + ' .imageList li img').draggable({ scroll: true, helper: 'clone', revert: 'invalid', snap: '.dropHere, .dropHereReassign', appendTo: 'body', revertDuration: 200, snapMode: 'inner');

--droppable
var that = this;
$('#' + this.Id + ' .imageList img.dropHere').droppabl开发者_如何学Goe({ drop: function (event, ui) {
$(that).attr('src', ui.draggable.attr('src'));
$(that).removeClass('dropHereReassign');
$(that).droppable({ disabled: true }); } });

HTML:

<div id="imagesContainer">
 <ul class="imageList">
  <li><img id="photo-1" src="/someImage.jpg" /></li>
 </ul>
</div>
<div id="dropImagesContainer" class="photoSection">
 <ul class="imageList">
  <li><img src="/00/06/12/00061275_in.png"><span class="description"></span></li>
  <li><img src="/dropHere.jpg"><span class="description"></span></li>
 </ul>
</div>

---

have you tried adding the property?

            connectToSortable: ".imageList",

There are some good examples here: http://jqueryui.com/demos/draggable/#sortable