如何设计拖拽排序的后端接口

一开始我想到的暴力解法是每次排序将所有数据的排序都改一遍，比如下面的例子。

这种方式如果数据少还可以，但是数据量一大，接口数据的传输以及大数据的处理必然会是个问题。

这是网上看到的一个方法，为数组所有元素加上索引值。

这种方式会极大地节省接口数据传输的问题。当然也会有一些小问题，比如中间值不是整数；比如第一个元素的索引值已经变为 0；这些问题是需要后端设计策略解决的。

给数组一个从 0 开始递增的索引值 index，当拖拽移动元素后，将拖拽元素之前的和现在的位置传递给后端，后端通过两个索引值更新整个数组的 index 索引值，与前端保持同步。

这样就能和前端遍历时的索引值对应上，做到前端移动元素，后端同步排序的功能。

这个方式类似于取中值法：首先为所有元素定义六位数的索引值。当拖拽移动元素后，将拖拽元素放置位置前后的元素索引值传给后端，后端去进行索引值的计算。并通过接口响应返回新的索引值更新到前端。

我认为它和取中值的区别就在于一个是前端算完直接给后端，一个是后端进行计算。其实差不多吧。

如果是列表排序是单列的问题，那么看板的排序就是多列排序和移动的问题。我的想法是，把多列当做一列来看。排序索引上从第一列自上而下递增，然后是后续几列。

而如何跨列移动，其实就是在做拖拽排序的时候更改一下元素所在列的状态，可能是一个状态，也可能是一个 ID，其实就是比单列排序多传了一个字段而已。

被拖动的元素增加draggable="true"属性；

接受拖过来的元素要接受新元素，ondragover 事件触发的时候要禁止自设的默认事件e.preventDefault()

监听ondrop事件，将元素进行插入appendChild；

思路：为li对象添加单击事件→事件触发后利用innerHTML获取li的文本。实例演示如下：

1、HTML结构

<ul id="test">

<li>Glen</li>

<li>Tane</li>

<li>John</li>

<li>Ralph</li>

</ul>

2、javascript代码

window.onload = function(){

var obj_lis = document.getElementById("test").getElementsByTagName("li")

for(i=0i<obj_lis.lengthi++){

obj_lis[i].onclick = function(){

alert(this.innerHTML)

}

}

}

3、效果演示

---