如何使附加的项目可在另一个可拖动部分中拖动 - JQUERY

Question

Currently i am trying to get a feature which is i have a md-3 section and inside this section got a button and when clicking on the button, it generates more button and these button are draggable. When i click the button, i get a form on the md-9 and inside this form got toggable section and a save button there too. When i save on the particular sections, it displays on the md-3 section under the button.

But i have this issue where i want to make the sub section of the button to be draggable and deletable too.

Here is my code for: HTML:

<div class="d-flex align-items-center">
        <div class="container">

            <!-- New design -->
            <div class="row">
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <div id="wrapper">
                                <div class="panel-group" id="accordion">
                                </div>
                                <div class="dd" id="nestable">
                                    <ol class="dd-list outer">
                                        <ol class="dd-list inner">

                                        </ol>
                                    </ol>

                                </div>
                                <div id="nestable-menu">
                                    <button type="button" class="btn btn-primary" id="appendnestable">
                                        <i class="fa fa-magic"></i>
                                        Add Module
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div id="nestable-output"></div>
                </div>
            </div>
        </div>
    </div>

Following is the JS:

 $(document).ready(function() {
        $('#nestable').nestable({
            group: 1
        })



        var nestablecount = 1;
        var nestablecountSection = 1;
        var question = 1;
        $('#appendnestable').click(function() {
            $('ol.outer').append('<li class="dd-item dd3-item" data-id="' + nestablecount +
                '"><div class="dd-handle dd3-handle">Drag</div><div class="dd3-content" name="' +
                nestablecount + '">Module ' + nestablecount + '</div>' +
                '<div id="accordion"><div class="group" data-section-id="' + nestablecount + '">' +
                '<h5></h5> ' +
                '<ul id="sortable-left-1" class="connectedSortable sortable" data-list-id="1">' +
                '<li data-item-id="1"><span class="draggable"></span></li>' +

                '</ul>' +
                '</li>' +
                '</div>' +
                '</div>');


            //append this inside nestable op
            $("#nestable-output").append('<div id="c-' +
                nestablecount + '" class="content"><form role="form-' + nestablecount +
                '"><div name="' + nestablecount + '">Module ' + nestablecount +
                '</div><div class="form-group"><label for="name">Name</label>' +
                '<input type="text" class="form-control names" placeholder="Phyllis Wheatley"></div>' +
                '<div class="form-group">' +
                '<button type="button" class="btn btn-primary pull-right save">Save</button>' +



                '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">' +
                '<div class="panel panel-default">' +
                '<div class="panel-heading" role="tab" id="headingOne' + nestablecount + '">' +
                ' <h4 class="panel-title">' +
                '<input type="checkbox" name="check" checked> <span class="label-text"></span>' +
                ' <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne' +
                nestablecount + '" aria-expanded="true" aria-controls="collapseOne">' +
                '   Case Studies' +
                ' </a>' +
                ' </h4>' +
                '</div>' +
                '<div id="collapseOne' + nestablecount +
                '" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne' +
                nestablecount + '">' +
                '  <div class="panel-body">' +
                '   Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird </br>' +
                '<button type="button" class="btn btn-primary btn-xs pull-right save_inside">Save</button>' +
                ' </div>' +
                ' </div>' +
                '</div>' +
                '<div class="panel panel-default">' +
                '  <div class="panel-heading" role="tab" id="headingTwo' + nestablecount + '">' +
                ' <h4 class="panel-title">' +
                '<input type="checkbox" name="check"> <span class="label-text"></span>' +
                ' <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo' +
                nestablecount + '" aria-expanded="false" aria-controls="collapseTwo">' +
                '   Video files' +
                '</a>' +
                '</h4>' +
                '</div>' +
                '<div id="collapseTwo' + nestablecount +
                '" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo' +
                nestablecount + '">' +
                '<div class="panel-body">' +
                '<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird' +
                ' on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,</p></br>' +
                '<p><button type="button" class="btn btn-primary btn-xs pull-right save_inside">Save</button></p>' +
                ' </div>' +
                ' </div>' +
                '</div>' +
                '<div class="panel panel-default">' +
                ' <div class="panel-heading" role="tab" id="headingThree' + nestablecount + '">' +
                '  <h4 class="panel-title">' +
                '<input type="checkbox" name="check"> <span class="label-text"></span>' +
                ' <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree' +
                nestablecount + '" aria-expanded="false" aria-controls="collapseThree">' +
                'Gamification' +
                '</a>' +
                '</h4>' +
                '</div>' +
                '<div id="collapseThree' + nestablecount +
                '" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree' +
                nestablecount + '">' +
                '<div class="panel-body">' +
                ' Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird' +
                ' on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, </br>' +
                '<button type="button" class="btn btn-primary btn-xs pull-right save_inside">Save</button>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>' +


                '</div></div></form></div>'
            )
            $("#c-" + nestablecount).hide() //hide them
            nestablecount++;
            nestablecountSection++;
            question++;
        });


        //onclick of li tag
        $(document).on('click', '.dd-item', function() {
            var ids = "c-" + $(this).data('id') //get data-id
            //show that div
            $('#nestable-output div.content').not($("#" + ids)).hide()
            $("#" + ids).toggle() //hide other


        });

        //on click of yes :
        $(document).on("click", ".save", function() {
            //get values 
            var new_names = $(this).closest("form").find(".names").val();
            var counts = $(this).closest('form').find("div[name]").attr('name');
            if (new_names != "") {
                //change them
                $(this).closest('form').find("div[name]").text(new_names)
                $(".outer li[data-id=" + counts + "] .dd3-content").text(new_names)
            } else {
                $(this).closest("form").find(".names").focus();

            }
        });
        //on click of yes :
        $(document).on("click", ".save_inside", function() {

            if ($(this).closest('.panel-collapse').prev().find('input[type=checkbox]').is(":checked")) {
                //get values 
                var new_namess = $(this).closest('.panel-collapse').prev().find('[data-toggle]').text()
                var counts = $(this).closest('form').find("div[name]").attr('name');
                //add collapse for saved names


                $("h5").append(
                    '<div id="draggable" style="left:0;" class="draggable in-box ui-widget-content">' +
                    '' + new_namess + '' +
                    '</div>')
                // console.log(new_namess)
                // console.log(counts)
            } else {
                $(this).closest('.panel-collapse').prev().find('input[type=checkbox]').focus()
            }

        });

    });

Please advise on how achieve the draggable and deletable feature for items inside the button on md-3. Here is the link for JSFIDDLE

Here is attached image that needs to be draggable and deletable

Answer 1

 $( function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); } ); $('.addrow').click(function(){ $( "#sortable" ).append( "<li class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-ns\"></span>Item NEW</li>" ); });

 #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> <div class="addrow">Add new row</div> <ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 3</li> </ul>

You can try to press add row and it is draggable even the element is newly created.