官方网址:https://github.com/SortableJS/Vue.Draggable
demo:https://sortablejs.github.io/Vue.Draggable/#/simple
<v-row>
<v-col cols='3'>
<h3>ROCS1</h3>
<draggable
class="list-group"
:list="list1"
v-bind="dragOptions"
@start="drag = true"
@end="drag = false"
>
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
<div
class="list-group-item"
v-for="(element, index) in list1"
:key="element.name"
style="background-color: #e3edf7;"
>
{{ element.name }} {{ index }}
</div>
</transition-group>
</draggable>
</v-col>
<v-col cols='3'>
<h3>ROCS2</h3>
<draggable
class="list-group"
:list="list2"
v-bind="dragOptions"
@start="drag = true"
@end="drag = false"
>
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
<div
class="list-group-item"
style="background-color: #fff6b2; "
v-for="(element, index) in list2"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</transition-group>
</draggable>
</v-col>
<v-col cols='3' title="List 1">{{ list1 }}</v-col>
<v-col cols='3' title="List 1">{{ list2 }}</v-col>
</v-row>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "two-lists",
display: "Two Lists",
order: 1,
components: {
draggable,
},
data() {
return {
list1: [
{ name: "John", id: 1 },
{ name: "Joao", id: 2 },
{ name: "Jean", id: 3 },
{ name: "Gerard", id: 4 },
],
list2: [
{ name: "Juan", id: 5 },
{ name: "Edgard", id: 6 },
{ name: "Johnson", id: 7 },
],
drag: false,
};
},
computed: {
dragOptions() {
return {
animation: 200,
group: "description",
disabled: false,
ghostClass: "ghost",
};
},
},
methods: {
add() {
this.list.push({ name: "Juan" });
},
replace() {
this.list = [{ name: "Edgard" }];
},
clone(el) {
return {
name: el.name + " cloned",
};
},
log(evt) {
console.log(evt);
},
},
};
</script>
<style scoped>
.flip-list-move {
transition: transform 0.5s;
}
.no-move {
transition: transform 0s;
}
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.list-group-item {
min-height:50px;
line-height:50px;
cursor: move;
border-bottom: 1px solid #ccc
}
</style>