使用Sortable拖拽排序

使用Sortable拖拽排序

// 引入css
<link href="__LIBS__/jquery-nestable/jquery.nestable.css" rel="stylesheet" type="text/css" />
// 盒子
 <ul id="items" class="list-group" data-orderid="{$id}">
        {volist name="blist" id="vo"}
        <li class="item_li list-group-item" data-id="{$vo.id}">
            {$vo.bookname}
        </li>
        {/volist}
    </ul>
    // 引入js 
    <script src="__LIBS__/jquery-ui/jquery-ui.min.js"></script>
    <script src="__MODULE_JS__/Sortable.min.js"></script>

 $(document).ready(function(){
        var el = document.getElementById('items');
        let orderArr = []
        var sortable = Sortable.create(el,{
            store:{
                get: function (sortable) {
                    var order = localStorage.getItem(sortable.options.group.name);
                    return order ? order.split('|') : [];
                },
                set: function (sortable) {
                    // 这里是获取新的排序数组
                    var order = sortable.toArray();
                    orderArr = order
                }
            }
        });
        $('.btn_save').click(function(){
            let listid = $('#items').data('orderid')
            $.ajax({
                type:"post",
                url:'****',
                data:{
                    'order_arr':orderArr,
                    'orderid':listid
                },
                success:function(val){
                    if(val.code == 1){
                        alert(val.msg)
                    }
                }
            })
        })
    });

jq22包下载链接