我正在嘗試構建一個 Bootstrap 編輯器。我有一個<li>假定的 Bootstrap 類或工具的菜單，無論如何。<li>添加新部分和<li>添加一些工具是有區別的。添加一個我在之后使用插入的部分并添加我使用附加的工具。這里的部分是“當前”或“新”。jQuery<script>    $(function () {        $(".draggable").draggable({            helper: "clone",            end: function (e, ui) {                const Holded_ItemID = ui.draggable.attr("id");                if (Holded_ItemID == 'Sec') {                    $("li").removeClass("NewSection");                     $(ui.helper).addClass("NewSection");                }            }        });        $("#droppable").droppable({            drop: function (e, ui) {                const Holded_ItemID = ui.draggable.attr("id");                if (Holded_ItemID == 'Sec') {                //to insert new section after current section                $(this).children().last().insertAfter($(ui.draggable).clone());                }                else                {                //to add elemnt inside the new section                    $('.NewSection').append($(ui.draggable).clone());                };            }        });    });</script>HTML    <ul>        <li id="Sec" class="draggable">add new section</li>        <li class="draggable ui-widget-content">add new grid</li>        <li class="draggable ui-widget-content">add new button</li>        <li class="draggable ui-widget-content">add new Image</li>        <li class="draggable ui-widget-content">add new card</li>        <li class="draggable ui-widget-content">add new media objects</li>    </ul>    <div class="droppable ui-widget-header">      <p>Area Of web design</p>    </div>CSS  <style>  .draggable { width: 170px; height: 20px; border:1px dotted black; padding: 1px 1px 1px 10px; margin:3px; }  .droppable { width: 500px; height: 300px; padding: 0.5em; float: left; margin: 10px; padding:10px; background-color:antiquewhite; }  </style>簡單地說，我無法將 li 菜單中的任何內容添加到可放置區域中。為什么，我的代碼有什么問題？