添加拖放到vuetify的选择

问题描述

我在Vuetify的数据表中找到了两个拖放示例，但是我无法使其与select组件一起使用。这是我正在尝试的：

      <template>
            <v-select
                v-model="displayingRows"
                :items="rowItems"
                :menu-props="{ maxHeight: '400' }"
                label="Select"
                multiple
            >
                <Draggable v-model="displayingRows">
                <template slot="selection" slot-scope="data">
                    <!-- HTML that describe how select should render selected items -->
                    {{ data.item.text }} - {{ data.item.value }}
                </template>
                <template slot="item" slot-scope="data">
                    <!-- HTML that describe how select should render items when the select is open -->
                    {{ data.item.text }} 
                </template>
                </Draggable>
            </v-select>
      </template>

和js

<script> 
    import Draggable from 'vuedraggable'
    export default {
        components: {
              Draggable
        },data(){
             return {
                   displayingRows: [],rowItems: [{text: 'orange',value: 1},{text: 'banana',value: 2},{text: 'peach',value: 3}]
             }
        }
    } 
</script>

拖放完全无效。谁能帮我弄清楚我在做什么错？

解决方法

我将可拖动的 v-autocomplete 代码制作为 jsfiddle。

jsfiddle

• v-select 系列有 #selection，它提供了像 v-for 一样的模板。
• 每个选择都是一个包含一个元素的列表。
• 因此，将所有列表设置为 id = index
• 当事件 :move 在 <draggable> 中时，设置当前拖动元素的属性。
• 拖动时（changed），将当前元素插入到数组 items 的精确索引处。
• 并删除旧的。

关键是...可拖动列表id是items的{​​{1}}。

下面的代码...

html 模板

index

js 脚本

<div data-app id="app">
    <v-autocomplete
        v-model="selectedSync"
        :items="itemsSync"
        chips
        multiple
    >
        <template #selection="data">
            <draggable
                :id="data.index"
                :list="selectedSync"
                v-bind="dragOptionsChips"
                :move="move"
                @change="change"
            >
                <v-chip
                    draggable
                    v-model="selectedSync[data.index]"
                    :key="data.item"
                    @mousedown.stop
                    @click.stop
                >
                  {{data.item}}
                </v-chip>
            </draggable>
        </template>
    </v-autocomplete>
</div>

,

尝试使用：

options="{group:'draggableGroup'}" 

在每个可拖动项目上，如下所示：

Draggable v-model="displayingRows" :options="{group:'draggableGroup'}"