一个基于Sortable的简单列表拖拽

最新推荐文章于 2023-12-22 11:29:02 发布

OXINKA

最新推荐文章于 2023-12-22 11:29:02 发布

阅读量98

点赞数

文章标签： javascript css vue.js html

本文链接：https://blog.csdn.net/m0_60020519/article/details/118608411

版权

一个基于Sortable的简单列表拖拽

先安装依赖,在需要用到的页面引入

安装依赖
npm install sortablejs --save
引入页面
import Sortable from "sortablejs";

<template>
  <div class="demo">
    <div class="List" v-for="item in dataList" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>
<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      dataList: [
        {
          id: 1,
          name: "我是数字1",
        },
        {
          id: 2,
          name: "我是数字2",
        },
        {
          id: 3,
          name: "我是数字3",
        },
        {
          id: 4,
          name: "我是数字4",
        },
      ],
    };
  },
  mounted() {
    this.drag();
  },
  methods: {
    drag() {
      let drag = document.querySelector(".demo");
      Sortable.create(drag, {
        animation: 150,
        sort: true,
      });
    },
  },
};
</script>
<style scoped>
.List {
  width: 500px;
  line-height: 30px;
  background: pink;
  margin: 5px 0;
}
</style>