使用sortable.js进行拖拽后如何将排序结果更新到数据库

Question

使用sortable.js进行拖拽后如何将排序结果更新到数据库
目前在做app上的功能开发,突然遇到将使用sortable.js插件进行拖动排序,并将排序更新到数据库中的问题,网上也搜过相关答案,但都不是很理想;

页面如下
<div id="move_item">
                <div id="loader"></div> 
                <c:forEach var="item" items="${list}">
                    <div class="van-card" title="1">
                        <div class="van-card__header" onclick="onShowTablet('${item.id}')">
                            <a class="van-card__thumb"><i class="van-icon van-icon-shop-o" style="font-size: 40px;"></i></a>
                            <div class="van-card__content">
                                <div>
                                    <div class="van-card__title van-multi-ellipsis--l2">商铺出库量</div>
                                    <br/>
                                    <span class="van-tag van-tag--plain van-tag--danger">预估数量1：${item.cnt1}</span>
                                    <span class="van-tag van-tag--plain van-tag--danger">预估数量2：${item.cnt2}</span>
                                    <span style="padding-left: 280px;" class="drag-handle"><b>☰</b></span>
                                    <input type="hidden" id="orderlist" value="${item.show_order }"/>
                                    <input type="hidden" id="itemid" value="${item.id}"/>
                                    <br/>
                                    <span class="van-tag van-tag--plain van-tag--success">实际数量1：${item.fact_shop_capacity}</span>
                                    <span class="van-tag van-tag--plain van-tag--success">实际数量2：${item.fact_shop_quantity}</span>
                                </div>
                                <div class="van-card__price">
                                </div>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
            
    
<script type="text/javascript">
//拖动排序
    var list = document.getElementById("move_item");
    var orderlist = document.getElementById("orderlist");
    Sortable.create(list, {
        animation: 300,
        handle: ".drag-handle",
        update:function(){
            var new_order = [];
            list.children(".van-card").each(function(){
                new_order.push(this.title)
            });
            var newid = new_order.join(',');
            var olderid = orderlist.val();
            
            var url = "/mobile/ck/ajaxupdateorder.do?id=" + newid + "&olderid=" + olderid;
            $.ajax({
                type : "POST",
                url : url,
                cache : false, 
                beforeSend : function(){
                    $("#loader").html("<img src='/images/load.gif' />");
                },
                success : function(data) {
                    if(data == "1") {
                        alert("操作成功");
                        window.location.replace("/mobile/ck/strucindex.do?" );  
                    } else {
                        alert("操作失败");
                    }
                }, error : function() {
                    alert("操作失败");
                }
            });
        }
    }); 
</script>     

但是始终有问题,烦请大神帮忙看下是否有逻辑上的错误,或者有更好的思路指导下,万分感谢

Answer 1

排序前应该保留原始的排序[index]，拖动后将拖动的数据的[index]与后续数据的[index]全部依次修改。最后对比数据的原始[index]，只提交变更了的[index]

注：一开始的原始index要后台提供，提交的的[index]就是去修改这些数据在数据库中保存的值

Answer 2

把排序后的所有id提交给后端就行了

Answer 3

我最近写了一篇文章：是关于使用 SortableJS 实现表格拖拽排序，并将排序结果更新到数据库使数据行顺序修改（https://blog.csdn.net/XH_jing...）的，如果对这个问题还是不清楚，可以看一下这个哦