vuedraggable的使用

安装

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://juejin.cn/post/6844904062488412173

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

相关推荐
前端君7 小时前
实现最大异步并发执行队列
javascript
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队9 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军10 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy10 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿10 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL10 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉10 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~10 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng10 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript