value和list
Both can give a draggable injection Source:
/ * * Value injection data source /
<draggable v-model="list" ></draggable>
export default {
data() {
return {
list:[{
name:'aaa',id:1,
},{
name:'bbb',id:2,
}]
};
}
}
/ * List inject data source * /
<draggable :list="list" ></draggable>
export default {
data() {
return {
list:[{
name:'aaa',id:1,
},{
name:'bbb',id:2,
}]
};
}
}
The difference between them is: value injected, if a drag occurs, value of the data does not follow the changes, list injected, change occurs.
That value injection, with or without subsequent changes in both data volume and it does not matter, it just needs a place to show the drag effect; list injected, body and attribute data on the current page is consistent, the order on the page changed, the sequence corresponding to the internal array member array structure will be rearranged, and consistent display.
Note that they can not appear at the same time, can only choose one.
ghost-class和handle
ghost refers to the original position of the body in drag elements that make up the pit:
ghost-class is set to account for pit style elements:
<draggable ghost-class="ghost" > </draggable>
<style scoped>
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
</style>
drag handle is a handle, showing the drag portion of the drag element specifies:
Drag elements under normal circumstances as a whole are draggable, plus the handle after only place specified can drag and drop, and other places can not drag and drop:
<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 and componentData
For certain combinations of native label, e.g. ul, li or table, tr there tr, td like, can specify a Tag, so draggable replace the specified label:
<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>
The above example would be replaced draggable table.
componentData tag and the like, but for that combination of components, for example in the flap edge ElementUI, el-collapse el-collapse-item, and this combination is the relationship:
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="一致性 Consistency" name="1">
<Div> consistent with real life: real life processes, logical consistency, follow the language and concepts of user habits; </ div>
<Div> consistent interface: all the elements and structures need to be consistent, such as: design patterns, icons and text, such as the position of the element. </ Div>
</el-collapse-item>
<el-collapse-item title="反馈 Feedback" name="2">
<Div> control feedback: by style interface and allows users to post interactive effect can clearly perceive their operation; </ div>
<Div> Page Feedback: After the operation, a clear picture of the current status change of page elements. </ Div>
</el-collapse-item>
</el-collapse>
For that case above, if you want to turn into vuedraggable words, we must first set the tag, but how do the data on those el-collapse it? Necessary by the component-data configuration:
<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 above code is transmitted on the original el-collapse partially pulled out of data, attributes (prop, attr) includes an event set (on).
group and clone
group general usage is used to distinguish the drag group, group name of the group may be the same drag and drop each other:
<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>
Each drag effect generally as follows:
group there are more detailed configuration attributes, for example: group = "{name: 'abc', pull: 'clone', put: false}".
put parameters is relatively simple, is used to control whether content can be dragged anywhere else to our side. If set to false, it means that the content elsewhere can not be dragged to their side.
pull parameter control is pulled away from the current, in another place behavior. By default (set to true) is that you dragged to another place to go, it would be less a current list, the other list one more. If set to 'clone', then the current list will not be reduced, while the other list more than one.
Of course, you can even configure a: clone = 'func', used to control the content into other lists, we see a bit more complex example:
<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;
},
}
};
The above code, pull set to true or 'clone' is random (pullFunction). If true, then that is a little current, the other one more; if it is 'clone', at the same time: clone = 'func', it will call you with a self-clone method definition, a lot of current, the other one more.
transition-group和animation
vuedraggable animation is divided into two categories, one animation exchange process:
We can see on the map, drag and drop the elements through a content item, it will move the animation effect occurs every, this mainly through the animation settings:
<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>
Another is that the two sides have only exchanged animation:
这种和上面的不一样，这种交换过程中没有动画，但是只是最后真正交换的时候才有动画，这种需要加个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的样式类就好了