基于vue使用awe-dnd组件实现拖拽排序

责编:menVScode 2020-10-13 13:42 阅读(56)

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

awe-dnd文档地址:https://www.npmjs.com/package/awe-dnd

安装:

npm install awe-dnd --save

引入:

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

html部分:

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

js部分:

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', () => {
 
    })
  }

效果图:


标签: awe-dnd 拖拽 vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码