vuedraggable实现列表拖动排序

时间:2022-07-25
本文章向大家介绍vuedraggable实现列表拖动排序，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

文档地址

安装

npm i -S vuedraggable

页面进行导入

import draggable from "vuedraggable";

完整代码效果

<template>
  <div class="box">
    <draggable v-model="list" chosenClass="active" animation="500" @end="dragEnd">
      <div class="row" v-for="(item,index) in list" :key="index">{{item}}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7]
    };
  },
  methods: {
    dragEnd() {
      console.log(this.list);
    }
  }
};
</script>

<style scoped>
.row {
  background: cadetblue;
  width: 100%;
  height: 150px;
  line-height: 150px;
  text-align: center;
  margin: 15px 0;
}
.active {
  background: chocolate !important;
}
</style>

随机文章
Javascript知识点必读
最近更新