如何使用 JQuery 在使用可拖放和可拖放之后插入和追加？

Question

我正在尝试构建一个 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 菜单中的任何内容添加到可放置区域中。为什么，我的代码有什么问题？

Answer 1

几点注意事项：因为draggable({})你必须使用stop()事件而不是end。我曾经ui.helper访问拖动的元素。而不是$(this).children().last().insertAfter我使用的只是附加，不知道你为什么使用它，所以你可能想根据需要修改我的更改。我想这就是你想要的$(function () {&nbsp; $(".draggable").draggable({&nbsp; &nbsp; helper: "clone",&nbsp; &nbsp; stop: function (e, ui) {&nbsp; &nbsp; &nbsp; //console.log(ui.helper[0]);&nbsp; &nbsp; &nbsp; const Holded_ItemID = $(ui.helper[0]).attr("id");&nbsp; &nbsp; &nbsp; if (Holded_ItemID == 'Sec') {&nbsp; &nbsp; &nbsp; &nbsp; $("li").removeClass("NewSection");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $(ui.helper[0]).addClass("NewSection");&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });&nbsp; $("#droppable").droppable({&nbsp; &nbsp; drop: function (e, ui) {&nbsp; &nbsp; &nbsp; const Holded_ItemID = $(ui.draggable[0]).attr("id");&nbsp; &nbsp; &nbsp; if (Holded_ItemID == 'Sec') {&nbsp; &nbsp; &nbsp; //to insert new section after current section&nbsp; &nbsp; &nbsp; &nbsp; $("#droppable").append(ui.draggable[0])&nbsp; &nbsp; &nbsp; &nbsp; //$(this).children().last().insertAfter($(ui.draggable).clone());&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; //to add elemnt inside the new section&nbsp; &nbsp; &nbsp; &nbsp; $("#droppable").append($(ui.draggable[0]).clone());&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; });});.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; }<script src="https://code.jquery.com/jquery-1.12.4.js"></script>&nbsp; <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><ul>&nbsp; &nbsp; <li id="Sec" class="draggable">add new section</li>&nbsp; &nbsp; <li class="draggable ui-widget-content">add new grid</li>&nbsp; &nbsp; <li class="draggable ui-widget-content">add new button</li>&nbsp; &nbsp; <li class="draggable ui-widget-content">add new Image</li>&nbsp; &nbsp; <li class="draggable ui-widget-content">add new card</li>&nbsp; &nbsp; <li class="draggable ui-widget-content">add new media objects</li></ul><div id="droppable" class="droppable ui-widget-header">&nbsp; <p>Area Of web design</p></div>