jQuery ui droppable не срабатывает

Я пытаюсь создать систему перетаскивания, в которой изображения можно перетаскивать в определенный div. Поскольку изображения находятся в скроллере, я должен использовать клон для перетаскивания. У меня проблема в том, что событие «drop», похоже, не запускается, когда я перетаскиваю изображение в div. Я искал в Интернете, но не нашел решения, которое работает.

У меня есть следующее:

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

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

так что, когда элемент .draggable перетаскивается в div #droppable, я должен увидеть предупреждение. Droppable действительно получает активный класс, так что это заходит так далеко, но когда я бросаю изображение, ничего не происходит - оно просто исчезает.

HTML-код:

Для droppable (он находится в прокручиваемом div, используя прокручиваемый jQuery ui):

<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>

Для перетаскиваемых изображений:

<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>