how to use JQuery to insert after and append using draggable and droppable?

Question

I'm trying to build a Bootstrap editor. I have a <li> menu of supposed Bootstrap classes or tools, whatever. there is a difference between <li> to add a new section and <li> to add some tools. to add a section I use insert after and to add tool I use append. sections here are 'current' or 'new'.

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>

Simply, I can't add anything from the li menu into the droppable area. Why, what is wrong with my code?

Answer 1

Few notes:

• for draggable({}) you have to use stop() event not end .
• I used ui.helper to access the dragged element.
• insteadof $(this).children().last().insertAfter I used just append, not sure why you used that, so you might want to amend my change as you like.

I think this is what you want,

 $(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>