Bootstrap Nestable List-Group - JQuery Sortable

Question

你们可以帮助我使用JQuery Sortable吗？我需要将此列表排序。我无法让它工作，能够拖动另一个父级内的父级。我必须使句柄成为prev（）元素吗？

这是HTML

<ul class="list-group list-group-root well">

    <li href="#item-1" class="list-group-item" data-toggle="collapse">
        <i class="glyphicon glyphicon-chevron-right"></i>Item 1
    </li>

    <ul class="list-group collapse" id="item-1">

        <li href="#item-1-1" class="list-group-item" data-toggle="collapse">
            <i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
        </li>

        <ul class="list-group collapse" id="item-1-1">
            <li href="#" class="list-group-item">Item 1.1.1</li>
            <li href="#" class="list-group-item">Item 1.1.2</li>
            <li href="#" class="list-group-item">Item 1.1.3</li>
        </ul>

        <li href="#item-1-2" class="list-group-item" data-toggle="collapse">
            <i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
        </li>

        <ul class="list-group collapse" id="item-1-2">
            <li href="#" class="list-group-item">Item 1.2.1</li>
            <li href="#" class="list-group-item">Item 1.2.2</li>
            <li href="#" class="list-group-item">Item 1.2.3</li>
        </ul>

        <li href="#item-1-3" class="list-group-item" data-toggle="collapse">
            <i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
        </li>
        <ul class="list-group collapse" id="item-1-3">
            <li href="#" class="list-group-item">Item 1.3.1</li>
            <li href="#" class="list-group-item">Item 1.3.2</li>
            <li href="#" class="list-group-item">Item 1.3.3</li>
        </ul>

    </ul>

</ul>

CSS ..

    .list-group.list-group-root {
    padding: 0;
    overflow: hidden;
    }

    .list-group.list-group-root .list-group {
    margin-bottom: 0;
    }

    .list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
    }

    .list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
    }

    .list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 30px;
    }

    .list-group.list-group-root > .list-group > .list-group > .list-group-item {
    padding-left: 45px;
    }

    .list-group-item .glyphicon {
    margin-right: 5px;
    }

https://jsfiddle.net/Lh2rzts6/

Answer 1

回复更新

来自评论：

  

如果父母被拖动，如何让孩子与父母一起移动？

您可以使用 sortstop 事件来移动子项。

旧答案

我建议您使用html5sortable。

向每个ul元素添加类： sortable ＆amp; js-connected 并调用sortable。

＆＃13;

＆＃13;

$('.list-group-item').on('click', function () {
    $('.glyphicon', this)
            .toggleClass('glyphicon-chevron-right')
            .toggleClass('glyphicon-chevron-down');
});


//
// add the classes sortable & js-connected to each ul
//
$('.list-group').addClass('sortable js-connected');

//
// activate html5sortable
//
sortable('.sortable', {
    connectWith: 'js-connected',
    forcePlaceholderSize: true
});

//
// on sortstop handle the parents node....
//
document.querySelectorAll('.sortable').forEach(function (ele, idx) {
    ele.addEventListener('sortstop', function (e) {
        if(e.detail.item.querySelector('i') != null) { // if parent element (i.e.: UL) ....
            $(e.detail.item).append($(e.detail.item.getAttribute('href')));
        }
    });
});

＆＃13;

.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

.list-group.list-group-root .list-group {
    margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
    padding-left: 45px;
}

.list-group-item .glyphicon {
    margin-right: 5px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/lukasoppermann/html5sortable/master/dist/html.sortable.min.js"></script>


<ul class="list-group list-group-root well">

    <li href="#item-1" class="list-group-item" data-toggle="collapse">
        <i class="glyphicon glyphicon-chevron-right"></i>Item 1
    </li>

    <ul class="list-group collapse" id="item-1">

        <li href="#item-1-1" class="list-group-item" data-toggle="collapse">
            <i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
        </li>

        <ul class="list-group collapse" id="item-1-1">
            <li href="#" class="list-group-item">Item 1.1.1</li>
            <li href="#" class="list-group-item">Item 1.1.2</li>
            <li href="#" class="list-group-item">Item 1.1.3</li>
        </ul>

        <li href="#item-1-2" class="list-group-item" data-toggle="collapse">
            <i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
        </li>

        <ul class="list-group collapse" id="item-1-2">
            <li href="#" class="list-group-item">Item 1.2.1</li>
            <li href="#" class="list-group-item">Item 1.2.2</li>
            <li href="#" class="list-group-item">Item 1.2.3</li>
        </ul>

        <li href="#item-1-3" class="list-group-item" data-toggle="collapse">
            <i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
        </li>
        <ul class="list-group collapse" id="item-1-3">
            <li href="#" class="list-group-item">Item 1.3.1</li>
            <li href="#" class="list-group-item">Item 1.3.2</li>
            <li href="#" class="list-group-item">Item 1.3.3</li>
        </ul>

    </ul>
</ul>

＆＃13;

＆＃13;

＆＃13;