vuedraggable示例_vuedraggable快速入门

value和list

这两个都可以给一个draggable注入数据源&＃xff1a;

/*value注入数据源*/

export default {

data() {

return {

list:[{

name:&＃39;aaa&＃39;,id:1,

},{

name:&＃39;bbb&＃39;,id:2,

}]

};

}

}

/*list注入数据源头*/

export default {

data() {

return {

list:[{

name:&＃39;aaa&＃39;,id:1,

},{

name:&＃39;bbb&＃39;,id:2,

}]

};

}

}

它们的区别是&＃xff1a;value注入的&＃xff0c;如果发生了拖拽&＃xff0c;value的数据并不会跟着变化&＃xff0c;list注入的&＃xff0c;则会发生变化。

也就是说value注入的&＃xff0c;后续有无变化都和数据体没关系&＃xff0c;它用于只需要展示拖拽效果的地方&＃xff1b;list注入的&＃xff0c;数据体和当前页面上的属性是保持一致的&＃xff0c;页面上的顺序变了&＃xff0c;内部数组对应的结构体数组的顺序也会重新排列&＃xff0c;和显示保持一致。

注意&＃xff0c;它们不能同时出现&＃xff0c;只能二选一。

ghost-class和handle

ghost指的在拖拽体原本位置占坑的那个元素&＃xff1a;

ghost-class就是给占坑元素设置样式:

.ghost {

opacity: 0.5;

background: #c8ebfb;

}

handle是拖拽的把手&＃xff0c;表示拖拽元素指定可拖拽的部分&＃xff1a;

正常情况下拖拽元素的整体都是可拖拽的&＃xff0c;加了handle之后&＃xff0c;只能指定的地方可以拖拽了&＃xff0c;其他地方不能进行拖拽&＃xff1a;

{{ element.name }}

tag和componentData

对于一些特定的原生组合标签&＃xff0c;例如ul,li或者table,tr还有tr,td之类的&＃xff0c;可以指定一个tag&＃xff0c;让draggable替换成指定的标签&＃xff1a;

例如上面的draggable就会被替换成table。

componentData和tag类似&＃xff0c;但是是对于那种组合组件的&＃xff0c;例如在ElementUI中的折叠面边&＃xff0c;el-collapse和el-collapse-item就是这种组合关系&＃xff1a;

对于上面那种情况&＃xff0c;如果要转成vuedraggable的话&＃xff0c;首先要设置tag&＃xff0c;但是那些el-collapse上的数据怎么办呢&＃xff1f;就要通过component-data配置了&＃xff1a;

export default {

name: "third-party",

display: "Third party",

order: 10,

components: {

draggable

},

data() {

return {

list: [

{

title: "Consistency",

id: 1,

text: [

"Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;",

"Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."

]

},

{

title: "Feedback",

id: 2,

text: [

"Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;",

"Visual feedback: reflect current state by updating or rearranging elements of the page."

]

}

],

activeNames: [1],

collapseComponentData: {

on: {

change: this.inputChanged

},

props: {

value: this.activeNames

}

}

};

},

methods: {

inputChanged(val) {

this.activeNames &＃61; val;

}

}

};

上面代码中的collapseComponentData就是将原来el-collapse上传递数据的部分抽离出来了&＃xff0c;包括事件(on)&＃xff0c;属性(prop,attr)的设置。

group和clone

group一般的用法是用来区分拖拽组的&＃xff0c;group名称相同的拖拽组可以互相拖放&＃xff1a;

互相拖放的一般效果如下&＃xff1a;

group属性还有更详细的配置&＃xff0c;例如:group&＃61;"{name:&＃39;abc&＃39;,pull:&＃39;clone&＃39;,put:false}"。

put参数比较简单&＃xff0c;是用来控制别的地方内容是否可以拖拽到自己这边来。如果设置为false&＃xff0c;那么就表示别的地方的内容无法拖拽到自己这边来。

pull参数控制的是从当前拽走&＃xff0c;放在另外一个地方的行为。默认情况下(设置为true)是你拽到另外一个地方去&＃xff0c;当前列表中就会少一个&＃xff0c;对方列表多一个。如果设置为&＃39;clone&＃39;,那么当前列表不会减少&＃xff0c;同时对方列表多了一个。

当然你甚至可以配置一个:clone&＃61;&＃39;func&＃39;&＃xff0c;用来控制放入对方列表的内容&＃xff0c;我们看一个复杂一点的例子&＃xff1a;

export default {

methods: {

clone: function(el) {

return {

name: el.name &＃43; " cloned"

};

},

pullFunction() {

return Math.random()*10%2 ? "clone" : true;

},

}

};

上面的代码中&＃xff0c;pull设置为true还是&＃39;clone&＃39;是随机的(pullFunction)。如果设置的true&＃xff0c;那么就是当前少一个&＃xff0c;对方多一个&＃xff1b;如果是&＃39;clone&＃39;&＃xff0c;同时:clone&＃61;&＃39;func&＃39;&＃xff0c;那么就会用调用你自定义的clone方法&＃xff0c;当前不少&＃xff0c;对方多一个。

transition-group和animation

vuedraggable中的动画主要分成两类&＃xff0c;一类是交换过程的动画&＃xff1a;

上图我们可以看到&＃xff0c;拖拽元素每经过一个内容项&＃xff0c;它就会发生动画移动的效果&＃xff0c;这个主要是通过animation的设置&＃xff1a;

还有一种就是只有交换的双方才有动画&＃xff1a;

这种和上面的不一样&＃xff0c;这种交换过程中没有动画&＃xff0c;但是只是最后真正交换的时候才有动画&＃xff0c;这种需要加个class就好了&＃xff1a;

.flip-list-move {

transition: transform 0.5s;

}

给transition-group添加一个name属性ABC&＃xff0c;然后增加一个ABC-move的样式类就好了