vue拖拽排序

最新推荐文章于 2025-06-20 14:13:58 发布

原创最新推荐文章于 2025-06-20 14:13:58 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#拖拽排序 #vue

vue.js 专栏收录该内容

17 篇文章

订阅专栏

awe-dnd是一款可任意拖动排序的vue插件，支持桌面和移动端，有美观的拖拽过渡动画，还支持vue1和vue2版本。博客还介绍了该插件的安装、引入及页面内容相关信息。

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

awe-dnd 一款可任意拖动排序的vue插件。支持桌面和移动端，拖拽过渡动画美观。支持vue1和vue2版本。

安装：

npm install awe-dnd --save

引入：

import VueDND from 'awe-dnd'

Vue.use(VueDND)

页面内容：

    <div class="list" id="items" v-for="item in feedList" v-dragging="{ item: item, list: feedList, group: 'item' }">
      <div class="list-con">
        <div class="list-title">
          <ul>
            <li class="list-name pfRegular">{{item.name}}</li>
            <li class="list-time">时间 {{item.time}}</li>
          </ul>
        </div>
        <div class="main">
          <ul>
            <li>
              <p class="num">{{item.num1}}</p>
              <p class="type-name">数量1</p>
            </li>
            <li>
              <p class="num">{{item.num2}}</p>
              <p class="type-name">数量2</p>
            </li>
            <li>
              <p class="num">{{item.num3}}</p>
              <p class="type-name">数量3</p>
            </li>
          </ul>
        </div>
      </div>
    </div>

data(){
    returm{
       feedList:[{
        id:1,
        name:'内容1',
        time:'17:23',
        num1:100,
        num2:88,
        num3:1133.66
      },{
        id:2,
        name:'内容2',
        time:'17:23',
        num1:10,
        num2:88,
        num3:1133
      }]
   }
},  
mounted () {
    this.$dragging.$on('dragged', ({ value }) => {
      console.log(value.item)
      console.log(value.list)
    })
    this.$dragging.$on('dragend', () => {

    })
  }