javascript - Bootstrap 可嵌套列表组 - JQuery 可排序

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

答案更新

来自评论:

how do I make the children move with the parent if the parent is dragged?

您可以使用sortstop事件将子级与父级一起移动。

旧答案

我可能建议您使用html5sortable .

向每个 ul 元素添加类:sortable 和 js-connected 并调用 sortable。

$('.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')));
        }
    });
});

.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;
}

<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>