jquery ui可在框外显示可排序元素drop

Question

我有3个可排序的列，而它们是从菜单项框中拖出的，虽然拖放工作完美，但是可排序的问题是，当我尝试拖动一个删除的块时，可排序的放置仅在我将容器左侧的元素拖到我要放下的位置。 任何人都可以帮我解决这个问题。

HTML：

<div class="row page-layout">
        <div class="col-sm-9" id="droppable-container">
            <div class="droppable" id="droppable1"></div>
            <div class=" droppable" id="droppable2"></div>
            <div class=" droppable" id="droppable3"></div>
        </div>
        <div class="col-sm-3" id="draggable">
            <div class="draggable-item text-item">
                <span class="edit-icon"><i class="fa fa-pencil"></i></span>
                <span class="delete-icon"><i class="fa fa-trash"></i></span>
                <p>Text</p>
            </div>
            <div class="draggable-item image-item">
                <span class="edit-icon"><i class="fa fa-pencil"></i></span>
                <span class="delete-icon"><i class="fa fa-trash"></i></span>
                <p>Image</p>
            </div>
        </div>
    </div>

JavaScript的：

 $(".draggable-item").draggable({
    connectToSortable: '.droppable',
    helper: 'clone'
})


$("#droppable1").sortable({
    placeholder: "ui-state-highlight",
    connectWith: "#droppable1,#droppable2,#droppable3"
});
$("#droppable2").sortable({
    placeholder: "ui-state-highlight",
    connectWith: "#droppable1,#droppable2,#droppable3"
});
$("#droppable3").sortable({
    placeholder: "ui-state-highlight",
    connectWith: "#droppable1,#droppable2,#droppable3"
});

小提琴链接是：https://jsfiddle.net/anubala/0h1unoL7/

Answer 1

我看到与js命名存在冲突，只能看到我建议更改的connectToSortable : '#droppable1,#droppable2,#droppable3'