Question

我试图创建一个可拖动和可放置的界面，您可以在页面上放置一个元素，然后使用相同的菜单栏，您可以将该元素的另一个克隆拖动到之前删除的元素中，依此类推。

我使用Bootstrap网格作为容器。

我有两个问题。丢弃的元素不可排序。我无法拖放到新创建的容器中。

下面是html，然后是jquery

<div class="MainWrapper ui-droppable DocPreview col-md-9 col-lg-6">
    <div>
        <div class='row'>
            <div class='column ui-droppable col-md-6'></div>
            <div class='column ui-droppable col-md-6'></div>

        </div>

    </div>
</div>

jquery的：

var tempString = "<div class='draggable'>" +
                "<div class='row'>" +
                    "<div class='column drop-container ui-droppable col-md-6'></div>" +
                    "<div class='column ui-droppable col-md-6'></div>" +
                "</div>" +
            "</div>"

$(function () {
$("#draggable, .draggable").draggable({
    revert: "invalid",
    greedy:true,
    connectToSortable: ".MainWrapper, .ui-droppable",
    helper: function () {
        return tempString
    },
    start: function (event, ui) {
        $(ui.helper).css("width", "100%").css("height", "auto");
    }
});



$(".ui-droppable").droppable({
    greedy: true,
    drop: function (event, ui) {

    }
}).sortable();

编辑：这是我的代码的小提琴 - https://jsfiddle.net/crwfgeox/2/ 我没有使用Fiddle所以我不确定如何让Draggable继续使用它。在我的本地机器上它是拖动但我有上面提到的两个问题。

jquery UI draggable droppable嵌套元素

0 个答案: