JQuery Droppable не работает для определенного div

Question

У меня есть страница, на которой я хочу перетащить некоторые перетаскиваемые элементы из правой боковой панели и перетащить ее на центральную панель, которая занята png-изображениями документа.Фрагмент страницы:

<div class="row PDF_Main  margTB20" id="pdfview">
<div class="PDF_View">
    <div class="page">
        <div class='document-reader' id="document-reader">
            <input type="hidden" id="fileName" value="<c:out value="${filename}"></c:out>" />
        </div>
    </div>
</div>

После вызова ajax некоторые изображения добавляются в div для чтения документов динамически:

$("#document-reader").append('<div class="drop" id="'+i+'"><img width="'+width+'px" height="'+height+'px" class="render-image" onload="loadImage()" src="data:image/png;base64,'+<c:out value='response'></c:out>+'"></div>');

Теперь я хочуиспользуйте div с классом drop как jQuery droppable.Но это не работает:

$(document).ready(function() {
$(".dragSigners").draggable({
     helper: 'clone',
     cursor: 'move',
     tolerance: 'fit',
     revert: true 
});
$(".drop").droppable({
    accept : ".dragSigners",
    activeClass : "drop-area",
    drop: function(e, ui) {
        alert("dropped");
        ui.helper.remove();
        leftPosition  = ui.offset.left - $(this).offset().left;
        topPosition   = ui.offset.top - $(this).offset().top;
        alert("left position "+leftPosition);
        alert("top position "+topPosition);
    }
});
});

Однако вместо использования селектора класса jQuery для «отбрасывания», если мы используем «читатель документа», он работает. Как вы видите, «document-reader '- это класс для родительского div - я не хочу, чтобы он был сбрасываемым, поскольку может быть несколько изображений и, следовательно, несколько div с классом drop, и хочу сделать эти div доступными.Почему он не распознает div с drop-классом как dropable?И почему перетаскиваемый элемент возвращается в исходное положение, как если бы его не перетаскивали в опускаемый предмет?

Редактировать Еще одна проблема заключается в том, что перетаскиваемый элемент возвращается назад, даже если мы делаем возврат: false

Edit2 Этот код работает в некоторых другихстраница

Answer 1

Один из вариантов - сохранить параметры jQuery Draggable в качестве глобальной переменной и использовать их с вызовом .droppable() при добавлении динамического содержимого:

$(document).ready(function() {
    // droppable options
    var dropOptions = {
        accept : ".dragSigners",
        activeClass : "drop-area",
        drop: function(e, ui) {
            alert("dropped");
            ui.helper.remove();
            leftPosition  = ui.offset.left - $(this).offset().left;
            topPosition   = ui.offset.top - $(this).offset().top;
            alert("left position "+leftPosition);
            alert("top position "+topPosition);
        }
    }

    // Set draggable/droppable on page load
    $(".dragSigners").draggable({
        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit',
        revert: true
    });

    $(".drop").droppable(dropOptions);

    // Dynamic content stored as a jQuery object
    var newContent = $('<div class="drop"><img /></div>');

    // Append and set droppable options.
    newContent.appendTo("#document-reader").droppable(dropOptions);
})