Merhaba.

Menülerde sortable ile sıralama yapmaya çalışıyorum ama söyle bir sorun ile karşılaştım.

İlk gelen menüye Alt menü eklediğimde alt menüyü kendi arasında sürükleyebiliyorum.
Ancak Menü ekle butonuna bastıktan sonra oluşan ana menüye alt menü eklediğimde buradaki alt menüleri kendi arasında sürükleyemiyorum. Oluşan ana menü sürükleniyor.

Bu sorunu nasıl çözebiliriz?

HTML

<style>
  .menu-container .handle {
	  width: 24px;
	  height: 24px;
	  background-color: #8c8c8c;
	  cursor: move;
  }
  .menu-container form>ul li.ui-sortable-helper {
	  box-shadow: 0 0 10px 0 rgba(0,0,0,.3);
  }
  .ui-sortable-placeholder {
	  background-color: #f1efe2 !important;
	  visibility: visible !important;
  }
</style>

<div class="card mb-3 menu-container">
    <div class="card-body">

        <form action="" method="post">

        <div class="form-group">
            <input type="text" class="form-control form-control-lg" name="menu_title" placeholder="Menü Başlığı">
        </div>

        <div class="alert alert-success d-none" id="menu-status" role="alert"></div>

        <ul class="list-group menu" id="menu">
            <li class="list-group-item bg-light mb-3">
                <div class="handle"></div>
                <div class="close px-2 d-flex align-items-start delete-menu">
                    <span aria-hidden="true">&times;</span>
                </div>
                <div class="menu-item w-75">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-secondary text-white" style="width: 102px">Menü Ad</span>
                        </div>
                        <input type="text" class="form-control border-bottom-0" name="title[]">
                    </div>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-secondary text-white" style="width: 102px">Menü Url</span>
                        </div>
                        <input type="text" class="form-control border-bottom-0" name="url[]">
                    </div>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-secondary text-white" style="width: 102px">Menü İcon</span>
                        </div>
                        <input type="text" class="form-control" name="icon[]">
                    </div>
                </div>

                <div class="sub-menu mt-2">
                    <ul class="list-group menu mb-3"></ul>
                </div>
                <button class="btn btn-success btn-sm add-submenu">Alt Menü Ekle</button>

            </li>
        </ul>

    </div>
    <div class="card-footer">
        <div class="form-group">
            <button class="btn btn-danger" id="add-menu">Menü Ekle</button>
            <button class="btn btn-info" type="submit">Kaydet</button>
        </div>
    </div>
    </form>

</div>

JS

/* MENÜ EKLE */

var menu = "";
    menu+='<li class="list-group-item bg-light mb-3">';
    menu+='<div class="handle"></div>';
    menu+='<div class="close px-2 d-flex align-items-start delete-menu">';
    menu+='<span aria-hidden="true">&times;</span>';
    menu+='</div>';
    menu+='<div class="menu-item w-75">';
    menu+='<div class="input-group">';
    menu+='<div class="input-group-prepend">';
    menu+='<span class="input-group-text bg-secondary text-white" style="width: 102px">Menü Ad</span>';
    menu+='</div>';
    menu+='<input type="text" class="form-control border-bottom-0" name="title[]">';
    menu+='</div>';
    menu+='<div class="input-group">';
    menu+='<div class="input-group-prepend">';
    menu+='<span class="input-group-text bg-secondary text-white" style="width: 102px">Menü Url</span>';
    menu+='</div>';
    menu+='<input type="text" class="form-control border-bottom-0" name="url[]">';
    menu+='</div>';
    menu+='<div class="input-group">';
    menu+='<div class="input-group-prepend">';
    menu+='<span class="input-group-text bg-secondary text-white" style="width: 102px">Menü İcon</span>';
    menu+='</div>';
    menu+='<input type="text" class="form-control" name="icon[]">';
    menu+='</div>';
    menu+='</div>';

    menu+='<div class="sub-menu mt-2">';
    menu+='<ul class="list-group menu mb-3"></ul>';
    menu+='</div>';
    menu+='<button class="btn btn-success btn-sm add-submenu">Alt Menü Ekle</button>';
    menu+='</li>';

/* Menü Ekle Dğmesine Tıklandığında */

    $('#add-menu').on('click', function (e) {
        $('#menu').append(menu);
        e.preventDefault();
    });


/* SUBMENU EKLE */

/* Alt Menü Ekle Dğmesine Tıklandığında */

    $(document.body).on('click', '.add-submenu', function (e) {
        var index = $(this).closest('li').index();
        var submenu = "";

        submenu+='<li class="list-group-item rounded-0">';
        submenu+='<div class="handle"></div>';
        submenu+='<div class="close px-2 d-flex align-items-start delete-menu">';
        submenu+='<span aria-hidden="true">&times;</span>';
        submenu+='</div>';
        submenu+='<div class="menu-item w-75">';
        submenu+='<div class="input-group input-group-sm">';
        submenu+='<div class="input-group-prepend">';
        submenu+='<span class="input-group-text">Menü Ad</span>';
        submenu+='</div>';
        submenu+='<input type="text" class="form-control border-bottom-0" name="sub_title_' + index + '[]">';
        submenu+='</div>';
        submenu+='<div class="input-group input-group-sm">';
        submenu+='<div class="input-group-prepend">';
        submenu+='<span class="input-group-text">Menü Url</span>';
        submenu+='</div>';
        submenu+='<input type="text" class="form-control" name="sub_url_' + index + '[]">';
        submenu+='</div>';
        submenu+='</div>';
        submenu+='</li>';

        $(this).prev('.sub-menu').find('ul').append(submenu);
        e.preventDefault();
    });


/* SORTABLE */

$('.menu').sortable({
        handle: '.handle',
        update: function (event, ui) {
            $('#menu >li').each(function () {
                var subMenu = $('li', this);
                if (subMenu.length){
                    var index = $(this).index();
                    subMenu.each(function(){
                        $('input:eq(0)', this).attr('name', 'sub_title_' + index + '[]');
                        $('input:eq(1)', this).attr('name', 'sub_url_' + index + '[]');
                    });
                }
            });
        }
    });