拖拽组件

一下是基于vue3.0的，2.0如何使用自行查看官方文档

官方地址： 拖拽vue3.0版本

官方实例： 传送门，vue3.0版本

安装

npm i -S vuedraggable@next

最简单实例

<template>
  <div>
    <draggable
      v-model="list"
      item-key="name"
      animation="300"
      @change="change"
      @start="start"
      @end="end"
    >
      <template #item="{ element}">
        <div class="list-item">{{ element.name }}</div>
      </template>
    </draggable>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
//导入排序组件
import draggable from "vuedraggable/src/vuedraggable";

export default defineComponent({
  components: { draggable },
  setup() {
    let list = ref([
      { name: "A", id: 0 },
      { name: "B", id: 1 },
      { name: "C", id: 2 },
    ]);
    //改变事件
    let change = (e) => {
      console.log("改变了：", e);
    };
    //开始拖拽
    let start = (e) => {
      console.log("开始拖拽：", e);
    };
    //拖拽结束
    let end = (e) => {
      console.log("拖拽结束：", e);
    };

    return {
      list,
      change,
      start,
      end,
    };
  },
});
</script>

<style scoped lang="scss">
.list-item {
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: 1px solid red;
  background: pink;
  text-align: center;
  cursor: move;
}
</style>

官方文档对属性和事件描述的不是太详细，常用的有下面这些

//属性
list		要显示的数据
item-key	拖拽子项的标识
animation	动画时间，会有个过度效果
disabled	是否可以拖拽

//事件
change		改变事件
start		拖拽开始事件
end			拖拽结束事件
事件的执行顺序是：start->change->end

效果图

sortablejs

官方地址： 传送门

前言

上面的组件是基于sortablejs编写的，但是如果你想在react、angular甚至修改一些东西，那么你可以使用sortablejs

安装

npm install sortablejs --save

实列： 还是上面那个例子

  <div class="sort">
    <div class="list-item" v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>

import Sortable from "sortablejs";
 onMounted(() => {
     new Sortable(document.querySelector(".sort"), {
       animation: 300,
     });
   });

这个的属性和事件很详细，自行查看文档