代码之家 › 专栏 › 技术社区 › David J.

添加拖放到vuetify的选择中

vuetify.js drag-and-drop vue.js

David J. · 技术社区 · 4 年前

我在Vuetify的数据表中找到了一个拖放的例子,但我无法让它与选择组件一起工作。以下是我正在尝试的:

      <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>

拖放操作根本不起作用。有人能帮我找出我做错了什么吗?

0 回复 | 直到 4 年前

T A Foxi Maxi 4 年前

尝试使用:

options="{group:'draggableGroup'}"

在每个可拖动的项目上,如下所示:

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

hgkim 4 年前

我制作了可拖动的v-autocomplete代码作为jsfidle。

jsfiddle

v-select 系列有#selection,它提供了一个类似v-for的模板。
每个选择都是一个包含一个元素的列表。
因此,设置所有id=index的列表
当事件 :move 在里面 <draggable> ,设置当前拖动元素的属性。
拖动时( changed ),将当前元素插入数组 items 精确的指数。
并删除旧的。

关键是…可拖动列表 id 是 项目 s index .

下面的代码。。。

HTML模板

<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>

js脚本

new Vue({
    vuetify: new Vuetify(),
  el: "#app",
  data: {
    dragged: {
      from: -1,
      to: -1,
      newIndex: -1
    },
    selectedSync: ['a'],
    itemsSync: ['a', 'b', 'c', 'd', 'e']
  },
  methods: {
    move: function(value) {
      this.dragged = {
        from: parseInt(value.from.id),
        to: parseInt(value.to.id),
        newIndex: value.draggedContext.futureIndex,
      }
    },
    change: function(value) {
      if (value.removed) {
        // insert
        this.selectedSync.splice(this.dragged.to+this.dragged.newIndex,0, this.selectedSync[this.dragged.from])
        // delete
        if (this.dragged.from < this.dragged.to) // LTR
          this.selectedSync.splice(this.dragged.from, 1)
        else // RTL
          this.selectedSync.splice(this.dragged.from + 1, 1)
      }
    }
  },
  computed: {
    dragOptionsChips() {
      return {
        animation: 200,
        group: "group",
        disabled: false,
        ghostClass: "ghost",
        sort: true,
      };
    }
  },
})