原创 Dragula.js 搞定拖拽排序

相信大家在做一些图片的展示时如:banner、商品图文详情,都会遇到排序的问题,看似一个简单的update,但实际上是牵一发而动全身啊!

之前公司的排序是: 每次上移一个位置 如果遇到第一百个放到第一个 额。。。 不过好在没有这种情况

最近自己带了一个新项目,so,我必须把这个复杂的排序给干掉

大概思路是:

  1. 前端通过拖拽处理好排序顺序,所见即所得

  2. 将新的排序参数传给后端 逐个更新sort 字段

HTML 部分

  1. id='sortable' 为 需要排序的区域

  2. class="container" 为 排序对象

<form class="">
    <table class="" >
        <tbody id='sortable'>

                <tr id="item1" class="container">
                    <td></td>
                </tr>
                <tr id="item2" class="container">
                    <td></td>
                </tr>

        </tbody>
    </table>
</form>

JS部分

  1. 引入dragula.js

  2. 获取排序参数 如下

function sort(){

    // 获取规定ID下的集合        
    var divs =document.getElementById('sortable');
    console.log(divs.innerHTML);
    var items = divs.childNodes;

    var param = "";
    var sort = 1;
    for(var i=0;i<items.length;i++){

        // 获取集合单个元素的id值
        if( items.item(i).innerHTML != undefined){
            // 排序参数
            param = param + items.item(i).attributes["id"].nodeValue+ "=" + sort + ",";
            sort ++;
        }
    }

    // 发送排序请求

}
本文为 Laysonx 原创 文章,转载无需和我联系,但请注明来自 李鑫的杂货铺 或 李鑫博客