如何使用JQuery使用可拖动和可放置的方式插入和附加？

Question

我正在尝试构建一个 Bootstrap 编辑器。我有一个<li>所谓的 Bootstrap 类或工具的菜单，等等。<li>添加新部分和<li>添加一些工具之间是有区别的。要添加一个部分，我使用 insert after 并添加工具，我使用append。这里的部分是“当前”或“新”。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>超文本标记语言    <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 () {

  $(".draggable").draggable({

    helper: "clone",

    stop: function (e, ui) {

      //console.log(ui.helper[0]);

      const Holded_ItemID = $(ui.helper[0]).attr("id");

      if (Holded_ItemID == 'Sec') {

        $("li").removeClass("NewSection"); 

        $(ui.helper[0]).addClass("NewSection");

      }

    }

  });

  $("#droppable").droppable({

    drop: function (e, ui) {

      const Holded_ItemID = $(ui.draggable[0]).attr("id");

      if (Holded_ItemID == 'Sec') {

      //to insert new section after current section

        $("#droppable").append(ui.draggable[0])

        //$(this).children().last().insertAfter($(ui.draggable).clone());

      } else {

        //to add elemnt inside the new section

        $("#droppable").append($(ui.draggable[0]).clone());

      };

    }

  });

});

.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>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<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 id="droppable" class="droppable ui-widget-header">

  <p>Area Of web design</p>

</div>