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

Posted 2023-05-08

【中文标题】Bootstrap 可嵌套列表组 - JQuery 可排序

【英文标题】：Bootstrap Nestable List-Group - JQuery Sortable

【发布时间】：2017-09-27 11:20:33

【问题描述】：

您好，谁能帮我处理 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/

【参考方案1】：

答案更新

来自评论：

如果拖动父级，如何使子级与父级一起移动？

您可以使用 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>

【讨论】：

您好，感谢您的帮助。这对孩子们有用，但是如果父母被拖动，我如何让孩子们与父母一起移动？这是小提琴jsfiddle.net/Lh2rzts6/1

@CarlSmith 回答和jsfiddle 已更新。让我知道是否可以。我敢肯定它不能完全没问题，但这是要遵循的方法。谢谢