sortable的sort方法对表单等任意节点进行排序

需求描述： 前端代码写的顺序是：用户账号、用户姓名、手机号码，需求想对此进行灵活排序。

解决方案：为每个form-item绑定 data-id属性，值为后台传入的序号，再用sortable.js的sort()方法进行排序。

 

1.HTML代码 

注意：data-id属性，即为sortable 对象 toArrary()方法得到的顺序，这里为[3,2,1]

2. JS代码 

   先引入sortable.js，在节点渲染完毕后，JS代码如下：

         let body =  document.getElementById('formAdd');
        var sortable = Sortable.create(body)
        var order = sortable.toArray();
        console.log(order)//[3,2,1]
        sortable.sort(order.sort()); // apply

用sortable对象的sort()方法即可对节点进行排序。

3.排序前后对比图

排序前：

 排序后