jquery ui 可排序元素放置在框外时显示

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' 的最后一个类