sortable(sortable)

Vue中使用Sortable

之前开发一个后台管理系统，里面用到了 Vue和 Element-UI这个组件库，遇到一个挺有意思的问题，和大家分享一下。

场景是这样，在一个列表展示烂配亮页上，我使用了 Element-UI的表格组件，新的需求是在原表格的基础上卖旅支持拖拽排序。但是原有的组件本身不支持拖拽排序，而且由于是直接引入的 Element-UI，不方便修改它的源码，所以比较可行的方法只能是直接操作DOM。

具体的做法是在 mounted生命周期函数里，对 this.$el进行真实DOM的操作，监听 drag的一系列事件，在事件回调里移动DOM，并更新data。

HTML5 Drag事件还是挺多的，和 Touch事件差不多，自己手工实现也可以，不过这里就偷了个懒，直接用了一个开源的 Sortable库，直接传入 this.$el，监听封装后的回调，并且根据Vue的开发模式，在移动DOM的回调里更新实际的Data数据，保持数据和DOM的一致性。

如果你以为到这就结束了，那就大错特错，偷过的懒迟早要还。。。本以为这个方案是很美好的，没想到刚想调试一下，就出现了诡异的现象：A和B拖拽交换位置之后，B和A又神奇得换回去了！这是怎么回事？似乎我们的操作没有什么问题，在真实DOM移动了之后，我们也移动了相应的 data，数据数组的顺序和渲染出DOM的顺序应该是一致的。

问题出在哪里？我们回忆一下Vue的实现原理，在Vue2.0之前是通过 defineProperty依赖注入和跟踪的方式实现双向绑定。针对v-for数组指令，如果指定了唯一的Key，则会通过高效的Diff算法计算出数组内元素的差异，进行最少的移动或删除操作。而Vue2.0之后在引入了 Virtual Dom之后， Children元素的 Dom Diff算法和前者其实是相似的，唯一的区别就是，2.0之前Diff直接针对 v-for指令的数组对象，2.0之后则针对 Virtual Dom。DOM Diff算法在这里不再赘述，这里解释的比较清楚 virtual-dom diff算法

假设我们的列表元素数组是

渲染出来后的DOM节点是

那么Virtual Dom对应的结构就是

假设拖拽排序之后，真实的DOM变为

此时我们只操作了真实DOM，改编了它的位置，而Virtual Dom的结构并没有改变，依然是

此时我们把列表元素也按照真实DOM排序后变成

这时候根据Diff算法，计算出的Patch为， VNode前两项是同类型的节点，所以直接更新，即把$A节点饥宽更新成$B，把$B节点更新成$A，真实DOM又变回了

所以就出现了拖拽之后又被Patch算法更新了一次的问题，操作路径可以简单理解为

根本原因是 Virtual DOM和真实DOM之间出现了不一致。

所以在Vue2.0以前，因为没有引入 Virtual DOM，这个问题是不存在的。

在使用Vue框架的时候要尽量避免直接操作DOM

3.暴力解决！不走patch更新，通过v-if设置，直接重新渲染一遍。当然不建议这么做，只是提供这种思路~

所以，我们平时在使用框架的时候，也要去了解框架的实现原理的，否则遇到一些棘手的情况就会无从下手~

vue 中使用 sortable.js 拖动表格

sortable.js官网

拖放排序插件Sortable.js中文介绍

1.安装 npm或 yarn安装

2.使用

效果：

3.小结

事件：

onChoose：function列表单元被选中的回调函数

onStart：function列表单元拖动开始的回调函数

onEnd：function列表单元拖放结束后的回调函数

onAdd：function列表单元添加到本列表容器的回调函数

onUpdate：昌宏function列表单元在列表闷塌容器中的排序发生变化后的回调函数

onRemove：function列表元素移到另一个列表容器的回调函数

onFilter：function试图选中一个被filter过滤的列表单元的回调函数

onMove：function当移动列表单元在一个列表容器中或者多个列表容器中的回调函数

onClone：function当创建一个列表单元副本的时候的回调函数

事件对象：

to：HTMLElement--移动到列表容器

from：HTMLElement--来源的列表容器

item：HTMLElement--被移动的列表单元

clone：HTMLElement--副本的列表单元

oldIndex：number/undefined--在列表容器中的原序号

newIndex：number/undefined--在列表容器中的新序号

方法

option(name[,value])

获得或者设置项参数，使用方法类似于jQuery用法，没有第二个参数为获得option中第一个参数所对应的值，有第二个参数时，将重新赋蚂迅圆给第一个参数所对应的值；

toArray()

序列化可排序的列表单元的data-id（可通过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中

sort()

通过自定义列表单元的data-id的数组对列表单元进行排序

save()

destroy()

sort的用法有那些

sort

n.

种类,类派差别,品种

品质,本性,性质

方法,情形,样子,程度

某种人[物]

【刷】一套铅字; [pl. ]【纺】同级毛,同型毛

[古](一)群,(一)伙

under all sorts of names

以各种各样的名义

people of every sort and kind

各种各样的人

They'll never stomach that sort of attitude.

他们永远不会容忍那样的态度。

He is the right sort.

他倒是挺合适的人。

He is my sort.

他正是我需要的人。

Queer sort(of a thing)this!

[口]这(东西)倒挺妙!

This copy is hard [runs] on sorts.

【刷】这件稿子要用几种铅字排。

习惯用语

after a sort

有些,稍微,有几分

in a sort

有些,稍微,有几分

all of a sort

差不多,大同小异

all sort(s) of(=of all sorts)

各种各样的

all sorts and conditions of men(=men of all conditions)

各种各样的人,各阶层的人

and that sort of thing

以及诸如此类的事情,等等

a sort of

一种,可以说是...的东西

He is not my sort.

[口]他不是我喜欢的那种人。

in any sort

无论如何,必须

in a sort of way

略为,比较

in some sort

多少,稍微

in a sort

多少,稍微

It takes all sorts(to make a world)

世上的人是形形**[无奇不有]

no sort of

毫无[不];完全不是;和...全不相称

nothing of the sort

根本没有那样的事情

of a sort

同一种[类],相当的,勉强称得上的,较差的,所谓的

of all sorts

各种各样的

of every sort and kind

各种各样的

of one's sort

和某人同样身分[性质,品性]的

of sorts

=of a sort

各种各样的,未经挑选的

of the sort

那样的;这类的....,诸如此类蚂悄的...

out of sorts

觉得不舒服,情绪不佳,心里不自在;【刷】铅字不全

some sort of

某种的,仿佛,多少有些

that sort of thing

那[这]一类的事情

this sort of thing

那[这]一类的事情

That's your sort!

[口]那样做挺好!

那就是你的想法!

the better sort

[口]出色的人,更高一级的人,优秀的人

What sort of?

什么样的?怎样的?

sort ill with sth.

同某事物不相称,同某物不协闷羡渣调

sort of

[作状语用]有几分地;在一定程度上

kind of

[作状语用]有几分地;在一定程度上

sort out

整理好

挑出

解决

整顿

惩罚,打败

[和反身代词连用]解决...之间的问题,(使)恢复正常

sort out from

把...从...挑出来

sort well with sth.

同某物相称,同某物协调

Sortable.js 怎么写才取消sortable效果

Sortable.create(document.getElementById('collter1'),{

group:{

name:"words",

pull: true,

put: true

},

animation: 150,//动画参数

onAdd: function(evt){//拖拽时候添加有新的节点的时候发生该事件

},

onUpdate: function(evt){//拖拽更新节点位置发生该事链宏件

console.log('onUpdate.foo:', [evt.item, evt.from]);

},

onRemove: function(evt){//删除拖拽节点的时候促发该事件

console.log('onRemove.foo:', [evt.item, evt.from]);

},

onStart: function(evt){//开始拖拽出发该函数

console.log('onStart.foo:', [evt.item, evt.from]);

},

onSort: function(evt){//发生排序发生该事件

console.log('onUpdate.foo:', [evt.item, evt.from]);

},

onEnd: function(evt){//拖拽完毕之后发生该事件

// alert(evt.oldIndex);

// alert(evt.newIndex);

if(evt.oldIndex<evt.newIndex){

for(var i= evt.oldIndex; i< json[id].length; i++){

if(i> evt.newIndex){

break;

}else{

var name,str,style,num;

name= json[id][i+1]["name"];

num= json[id][i+1]["num"嫌唤瞎];

str= json[id][i+1]["str"];

style= json[id][i+1]["style"];

json[id][i+1]["name"]= json[id][i]["name"];

json[id][i+1]["num"]= json[id][i]["num"];

json[id][i+1]["str"]= json[id][i]["str"];

json[id][i+1]["style"]= json[id][i]["style"];

json[id][i]["name"]= name;

json[id][i]["num"]= num;

json[id][i]["str"]= str;

json[id][i]["style"]= style;

}

}

}

if(evt.oldIndex>evt.newIndex){

for(var i= evt.oldIndex; i>= 0; i--){

if(i< evt.newIndex){

break;

}else{

var name,str,style,num;

name= json[id][i-1]["name"];

num= json[id][i-1]["num"];

str= json[id][i-1]["str"];

style= json[id][i-1]["style"];

json[id][i-1]["name"]= json[id][i]["name"芹空];

json[id][i-1]["num"]= json[id][i]["num"];

json[id][i-1]["str"]= json[id][i]["str"];

json[id][i-1]["style"]= json[id][i]["style"];

json[id][i]["name"]= name;

json[id][i]["num"]= num;

json[id][i]["str"]= str;

json[id][i]["style"]= style;

}

}

}

}

});

关于sortable，sortable的介绍到此结束，希望对大家有所帮助。