使用jQuery UI创建菜单(拖放)

时间:2018-08-13 15:14:50

标签: asp.net asp.net-core menu jquery-ui-sortable jquery-ui-draggable

我正在使用jquery ui创建动态菜单,如wordpress。

我需要上下移动li,当我将它移动到父li的正下方时,它将成为它的子级。我的意思是,通过稍微移动一点,使其位于li的上方,这应该是其父li的子对象,否则它将被视为父li

这是我到目前为止所做的

 <ul id="accordion-sortable" class="nav-menu-sortable">

李在下面的ul jQuery中追加

$('#accordion-sortable').empty();
    for (var i = 0; i < chkArray.length; i++) {
        $('#accordion-sortable').append('<li class="menu-item card col-md-6"> <div class="menu-item-bar card-header" id="item-' + i + '">'
            + '<div class="menu-item-handel" data-toggle="collapse" data-target="#itemcollapse-' + i + '" aria-expanded="true" aria-controls="itemcollapse-' + i + '">'
            + '<span class="item-title">'
            + '<span class="menu-item-title Title" data-myval="">' + chkArray[i].ModuleName + '</span>'
            + '</span >'
            + '<span class="item-controls fr badge badge-warning">'
            + '<span class="item-type ParentType" data-myval="">' + chkArray[i].LinkType + '</span>'
            + '</span>'
            + '</div ></div>'
            + ' <div id="itemcollapse-' + i + '" data-id="' + i + '" class="collapse" aria-labelledby="item-' + i + '" data-parent="#accordion-sortable">'
            + ' <div class="card-body">'

            + '<div class="form-group">'
            + '<label>Navigation Label</label>'
            + '<input type="text" name="">'
            + ' </div>'
            + '<div class="form-group link-to-original">'
            + '  <label>Original:</label>'
            + '<a href="">Home</a>'
            + '</div>'

            + '<div class="multiple-area">'
            + '  <button type="button" class="btn btn-primary removeLi-' + i + '" onclick="myFunction(' + i + ')">Remove</button>'
            + '</div>'
            + '</div>'
            + '</div>'
            + '</li > ')

对于拖放操作,我正在使用此功能

 $(function () {
    $("#accordion-sortable").sortable();

});

我为li的孩子开设了一个班级,但是当li拖动到右侧时如何设置该班级?通过使用上述功能,只能上下移动

0 个答案:

没有答案