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

Question

目前我正在尝试获得一个功能，那就是我有一个md-3部分，在这个部分里面有一个按钮，当点击按钮时，它会生成更多的按钮，这些按钮是可拖动的。当我点击按钮时，我在md-9上得到一个表单，在这个表单里面有一个toggable部分和一个保存按钮。当我在特定部分保存时，它显示在按钮下的md-3部分。

但是我有这个问题，我想让按钮的子部分是可拖动和可删除的。

下面是我的代码: 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>

以下是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()
            }

        });

    });

请建议如何在md-3上实现按钮内项目的可拖动和可删除功能。这是JSFIDDLE的链接

这是需要拖拽和删除的附加图像

​

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-n-s\"></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-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>

</ul>

​

您可以尝试按add row，即使元素是新创建的，它也是可拖动的。