vuedraggable的使用

边中之城2023-12-16 21:49

安装

javascript 复制代码

yarn add vuedraggable
npm i -S vuedraggable

使用

js引入

javascript 复制代码

import draggable from 'vuedraggable'

components: {
    draggable,
  },

html

javascript 复制代码

<v-list>
  <draggable :list="newHeaderList">
    <v-list-item v-for="item in newHeaderList" :key="item.value">
      <v-list-item-action>
        <v-checkbox v-model="item.checked" color="primary"></v-checkbox>
      </v-list-item-action>
      <v-list-item-title>{{ item.text }}</v-list-item-title>
    </v-list-item>
  </draggable>
</v-list>

newHeaderList

javascript 复制代码

[
    {
        "checked": true,
        "text": "a",
        "value": "vin",
        "sortable": false,
        "width": "100px"
    },
    {
        "checked": true,
        "text": "id",
        "value": "id",
        "width": "100px"
    },
    {
        "checked": true,
        "text": "描述",
        "value": "description",
        "width": "200px"
    },
    {
        "checked": true,
        "text": "状态",
        "value": "status",
        "width": "100px"
    },
    {
        "checked": true,
        "text": "级别",
        "value": "level",
        "width": "80px"
    },
    {
        "checked": true,
        "text": "资产",
        "value": "asset",
        "width": "100px"
    },
    {
        "checked": false,
        "text": "车型",
        "value": "vehicle",
        "width": "150px",
        "class": "display-none",
        "cellClass": "display-none"
    },
    {
        "checked": false,
        "text": "分类",
        "value": "type",
        "sortable": false,
        "width": "200px",
        "class": "display-none",
        "cellClass": "display-none"
    },
    {
        "checked": false,
        "text": "时间",
        "value": "date",
        "width": "195px",
        "class": "display-none",
        "cellClass": "display-none"
    },
    {
        "checked": false,
        "text": "创建者",
        "value": "createUser",
        "width": "120px",
        "class": "display-none",
        "cellClass": "display-none"
    },
    {
        "checked": false,
        "text": "更新者",
        "value": "updateUser",
        "width": "120px",
        "class": "display-none",
        "cellClass": "display-none"
    },
]

参考连接

npm官网：https://www.npmjs.com/package/vuedraggable

sortablejs官网：https://sortablejs.github.io/Vue.Draggable/#/simple

简单使用：https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/simple.vue