1. npm install vuedraggable

  2. import draggable from 'vuedraggable'

  3. 示例代码

Test.vue

<template>
 <ul class="sort-ul">
    <div>45454</div>
    <draggable  group="article" :value="sortArr" @input="handleListChange($event)">
       <li v-for="(item,index) in sortArr" :key="index">
         <h2>{{item.title}}</h2>
       </li>
    </draggable>
  </ul>
</template>
<script>
import Draggable from 'vuedraggable';

export default {
  name: 'Test',
  props:{
  },
  data () {
    return {
      fileList: [],
      sortArr:[
        {title:"00"},
        {title:"01"},
        {title:"02"},
        {title:"03"},
        {title:"04"},
        {title:"05"},
        {title:"06"},
        {title:"07"},
        {title:"08"},
        {title:"09"},
      ],
    }
  },
  components: {
    Draggable,  
  },
  methods: {
      // 更新位置
      handleListChange(event){
        console.log(event);
        this.sortArr = event;
      }
  },
  mounted () {
   
  }
}
</script>
<style>
  ul{
    padding: 0;
    width: 400px;
  }

  li{
    width: 100px;
    float:left;
  }

</style>

main.js

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
})

app.vue

<template>
  <div id="app">
    <Test />
  </div>
</template>

<script>

import Test from '@/components/Test.vue'

export default {
  name: 'App',
  components:{
    Test,
  },
  methods: {
  }
}
</script>
GitHub 加速计划 / vu / Vue.Draggable
19.97 K
2.89 K
下载
SortableJS/Vue.Draggable: Vue.Draggable 是 Sortable.js 的 Vue.js 封装组件,提供了拖放排序功能,可以在 Vue 应用中轻松实现列表元素的可拖拽重排。
最近提交(Master分支:2 个月前 )
431db153 - 2 年前
017ab498 - 3 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐