value和list
这两个都可以给一个draggable注入数据源:
/*value注入数据源*/ <draggable v-model="list" ></draggable> export default { data() { return { list:[{ name:'aaa',id:1, },{ name:'bbb',id:2, }] }; } } /*list注入数据源头*/ <draggable :list="list" ></draggable> export default { data() { return { list:[{ name:'aaa',id:1, },{ name:'bbb',id:2, }] }; } }
它们的区别是:value注入的,如果发生了拖拽,value的数据并不会跟着变化,list注入的,则会发生变化。
也就是说value注入的,后续有无变化都和数据体没关系,它用于只需要展示拖拽效果的地方;list注入的,数据体和当前页面上的属性是保持一致的,页面上的顺序变了,内部数组对应的结构体数组的顺序也会重新排列,和显示保持一致。
注意,它们不能同时出现,只能二选一。
ghost-class和handle
ghost指的在拖拽体原本位置占坑的那个元素:
ghost-class就是给占坑元素设置样式:
<draggable ghost-class="ghost" > </draggable> <style scoped> .ghost { opacity: 0.5; background: #c8ebfb; } </style>
handle是拖拽的把手,表示拖拽元素指定可拖拽的部分:
正常情况下拖拽元素的整体都是可拖拽的,加了handle之后,只能指定的地方可以拖拽了,其他地方不能进行拖拽:
<draggable tag="ul" :list="list" class="list-group" handle=".handle"> <li class="list-group-item" v-for="(element, idx) in list" :key="element.name" > <i class="fa fa-align-justify handle"></i> <span class="text">{{ element.name }} </span> <input type="text" class="form-control" v-model="element.text" /> <i class="fa fa-times close" @click="removeAt(idx)"></i> </li> </draggable>
tag和componentData
对于一些特定的原生组合标签,例如ul,li或者table,tr还有tr,td之类的,可以指定一个tag,让draggable替换成指定的标签:
<draggable v-model="list" tag="tbody"> <tr v-for="item in list" :key="item.name"> <td scope="row">{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.sport }}</td> </tr> </draggable>
例如上面的draggable就会被替换成table。
componentData和tag类似,但是是对于那种组合组件的,例如在ElementUI中的折叠面边,el-collapse和el-collapse-item就是这种组合关系:
<el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="一致性 Consistency" name="1"> <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div> <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div> </el-collapse-item> <el-collapse-item title="反馈 Feedback" name="2"> <div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div> <div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div> </el-collapse-item> </el-collapse>
对于上面那种情况,如果要转成vuedraggable的话,首先要设置tag,但是那些el-collapse上的数据怎么办呢?就要通过component-data配置了:
<draggable tag="el-collapse" :list="list" :component-data="collapseComponentData" > <el-collapse-item v-for="item in list" :key="item.id" :title="item.title" :name="item.id" > <div v-for="(lign, idx) in item.text" :key="idx">{{ lign }}</div> </el-collapse-item> </draggable> <script> 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 = val; } } }; </script>
上面代码中的collapseComponentData就是将原来el-collapse上传递数据的部分抽离出来了,包括事件(on),属性(prop,attr)的设置。
group和clone
group一般的用法是用来区分拖拽组的,group名称相同的拖拽组可以互相拖放:
<draggable class="list-group" :list="list1" group="people" > <div class="list-group-item" v-for="(element, index) in list1" :key="element.name" > {{ element.name }} {{ index }} </div> </draggable> <draggable class="list-group" :list="list2" group="people" > <div class="list-group-item" v-for="(element, index) in list2" :key="element.name" > {{ element.name }} {{ index }} </div> </draggable>
互相拖放的一般效果如下:
group属性还有更详细的配置,例如:group="{name:'abc',pull:'clone',put:false}"。
put参数比较简单,是用来控制别的地方内容是否可以拖拽到自己这边来。如果设置为false,那么就表示别的地方的内容无法拖拽到自己这边来。
pull参数控制的是从当前拽走,放在另外一个地方的行为。默认情况下(设置为true)是你拽到另外一个地方去,当前列表中就会少一个,对方列表多一个。如果设置为'clone',那么当前列表不会减少,同时对方列表多了一个。
当然你甚至可以配置一个:clone='func',用来控制放入对方列表的内容,我们看一个复杂一点的例子:
<draggable class="list-group" :list="list1" :group="{name:'people',pull:pullFunction,put:false}" :clone='clone'> <div class="list-group-item" v-for="(element, index) in list1" :key="element.name" > {{ element.name }} {{ index }} </div> </draggable> <draggable class="list-group" :list="list2" group="people" > <div class="list-group-item" v-for="(element, index) in list2" :key="element.name" > {{ element.name }} {{ index }} </div> </draggable> export default { methods: { clone: function(el) { return { name: el.name + " cloned" }; }, pullFunction() { return Math.random()*10%2 ? "clone" : true; }, } };
上面的代码中,pull设置为true还是'clone'是随机的(pullFunction)。如果设置的true,那么就是当前少一个,对方多一个;如果是'clone',同时:clone='func',那么就会用调用你自定义的clone方法,当前不少,对方多一个。
transition-group和animation
vuedraggable中的动画主要分成两类,一类是交换过程的动画:
上图我们可以看到,拖拽元素每经过一个内容项,它就会发生动画移动的效果,这个主要是通过animation的设置:
<draggable class="list-group" :list="list1" :animation='200'> <transition-group> <div class="list-group-item" v-for="(element, index) in list1" :key="element.name" > {{ element.name }} {{ index }} </div> </transition-group> </draggable>
还有一种就是只有交换的双方才有动画:
这种和上面的不一样,这种交换过程中没有动画,但是只是最后真正交换的时候才有动画,这种需要加个class就好了:
<draggable class="list-group" :list="list1" > <transition-group name='flip-list'> <div class="list-group-item" v-for="(element, index) in list1" :key="element.name" > {{ element.name }} {{ index }} </div> </transition-group> </draggable> <style> .flip-list-move { transition: transform 0.5s; } </style>
给transition-group添加一个name属性ABC,然后增加一个ABC-move的样式类就好了