Awednd---一个轻量的Vue拖拽排序插件

街角的守护i

于 2020-04-28 09:45:01 发布

阅读量793

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/m0_37820004/article/details/105806332

版权

本文档介绍了如何在Vue项目中利用Awe-dnd插件实现拖拽排序功能，从需求背景出发，详细讲解了安装依赖、全局及组件内引入方法，并提到了相关API的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 需求

实现对模块的拖拽排序。

2. 安装依赖

npm install awe-dnd --save

3. 引入使用

3.1 main.js中全局引入

import VueDND from 'awe-dnd'
Vue.use(VueDND)

3.2 组件中引入及使用

<script>
export default {
  data () {
    return {
        colors: [{
            text: "Aquamarine"
        }, {
            text: "Hotpink"
        }, {
            text: "Gold"
        }, {
            text: "Crimson"
        }, {
            text: "Blueviolet"
        }, {
            text: "Lightblue"
        }, {
            text: "Cornflowerblue"
        }, {
            text: "Skyblue"
        }, {
            text: "Burlywood"
        }]
    }
  },
  /* if your need multi drag
  mounted: function() {
      this.colors.forEach((item) => {

最低0.47元/天解锁文章