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

【问题标题】：how to use JQuery to insert after and append using draggable and droppable?如何使用 JQuery 在使用可拖放和可拖放之后插入和追加？
【发布时间】：2020-03-22 19:37:43
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html jquery-ui-draggable jquery-ui-droppable

【解决方案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>

【讨论】：