javascript - jQuery UI的可排序元素放置在框外时显示

我有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/

最佳答案

我看到的与js命名有冲突，只能看到我建议更改的connectToSortable : '#droppable1,#droppable2,#droppable3'最后一个类

关于javascript - jQuery UI的可排序元素放置在框外时显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44906993/