我试图仅包含所有相关代码。这适用于 Vue3 和 VueDraggableNext。我想更改列表的顺序,而不是在列表之间移动它。
以下是模板和相关的脚本:
<template>
<div class="childBox scripts">
<draggable
v-model="data.scriptList"
element="div"
class="dragArea"
item-key="id"
>
<template
#item="{item}"
element="div"
class="selectedItems"
item-key="id"
:ref="item.label"
>
<span>{{item.label}}</span>
<span class="remove" v-on:click="removeScript(item.id)"></span>
</template>
</draggable>
</div>
</template>
import {ref} from 'vue';
import VueDraggableNext from 'vue-draggable-next';
export default {
name: 'Scheduler',
components: {
Draggable: VueDraggableNext
},
setup() {
const data = ref({
scriptList: [
{"id": 3, "label": "Yadda"},
{"id": 2, "label": "Badda"},
{"id": 13, "label": "Bing" }
]
});
return {
data
};
},
methods: {
removeScript: function(id) {
//code here, but irrelevant.
},
上面的代码中没有呈现任何内容,除了:
<draggable modelvalue="" element="div" class="dragArea" item-key="id"></draggable>
如果我用 v-for 替换可拖动部分,它会呈现,但当然没有可拖动操作:
<div v-for="item in data.scriptList"
:key="item.id"
class="selectedItems list-group-item"
:ref="item.label">
<span>{{ item.label }}</span>
<span class="remove" v-on:click="removeScript(item.id)"></span>
</div>