jQuery Ui-Sortable占位符工作不正确

Question

我将bootstrap4与JQuery和JQuery-Ui一起使用。 我使用sortable将一些菜单项添加到“收藏夹列表”中。 工作正常。但是当我移动一个元素时，占位符仅显示在右侧。我该如何解决？ 请参见下面的gif动画。 bootstrap4是否有问题？

谢谢！ 最好的问候尼古拉斯 Gif Animation

  $(document).ready(function () {

            $(function () {
                var oldList, newList, item;
                $('.sortable').sortable({
                    placeholder: {
                        element: function (currentItem) {
                            return $("<li class=\"sortable-placeholder\">&nbsp;</li>")[0];
                        },
                        update: function (container, p) {
                            return;
                        }
                    },
                    connectWith: ".sortable",
                    revert: true,
       forcePlaceholderSize: true,
        zIndex: 9999,
                    start: function (event, ui) {
                        item = ui.item;
                        newList = oldList = ui.item.parent().parent();
                    },
                    stop: function (event, ui) {
                        alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));
                    },
                    change: function (event, ui) {
                        if (ui.sender) newList = ui.placeholder.parent().parent();
                    },
                    connectWith: ".sortable"
                }).disableSelection();
            });
        });

.sortable-placeholder {
            border: 1px #121212 groove !important;
            background: rgb(241, 137, 11);
            z-index: 9999 !important;
            margin-top: 5px;
            margin-bottom: 5px;
           display:block;
           width: 100%;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="FavListView" class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
    <li class="web nav-item has-treeview">
        <a href="#" class="nav-link inactive">
            <i class="nav-icon far fa-star" style="color:rgb(241, 191, 8);"></i>
            <p>
                Favoriten
                <i class="right fa fa-angle-left"></i>
            </p>
        </a>
        <ul margin-left: 10px;" id="list-5651232" class="nav nav-treeview sortable ui-sortable">
            <li id="f6336c88-a762-4ef9-ac73-03f38f2760e5" class="nav-item ui-sortable-handle">
                A
            </li>
            <li id="41160ec6-2187-441f-bc89-a9a2d7e896fb" class="nav-item ui-sortable-handle">
               B
            </li>
            <li id="ae656c8e-b401-4797-9352-715075715230" class="nav-item ui-sortable-handle">
                C
            </li>
        </ul>
    </li>
</ul>

<hr />
<div id="blah">
    <ul class="sortable">
        <li>Test</li>
        <li>Test2</li>
    </ul>
</div>