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>');

现在，我想将带有drop类的div用作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);
    }
});
});

但是，如果我们使用'document-reader'，它可以代替jQuery类选择器来代替“ drop”。如您所见，'document-reader'是父div的类-我不想使其可放置，因为可能有多个图像，因此具有“ drop”类的多个div并希望使这些div可放置。为什么不将具有drop类的div识别为可丢弃的？以及为什么可拖动元素会像没有被拖动到可放置对象一样还原到其原始位置？

编辑还有一个问题是，即使我们进行了还原，被拖动的元素也会还原回原先：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);
})

jQuery Droppable在某些div上不起作用

1 个答案: