vue拖拽dom排序

安装vuedraggable插件

npm i vuedraggable

使用说明

以上这个第三方插件使用起来极为便捷。只需要用标签<draggable></draggable>包裹需要拖拽排序的dom就可以了。

• v-model绑定的是排序dom所在的数据源数组
• v-bind绑定的是配置项，如需要动态禁用拖拽功能，只需要控制配置项里的disabled属性即可
• ghost-class绑定的是拖拽时dom的移动样式，一般用下面示例里的.ghost样式就可以了
• 以下通用示例里的结构可以直接复制过去使用，足够解决一般的dom拖拽排序场景了。如果需要更复杂的效果，可移步至以下链接查看详细的代码片段示例

vuedraggablehttps://sortablejs.github.io/Vue.Draggable/#/simple

通用示例

<template>
  <draggable
    v-model="data"
    group="people"
    @start="drag = true"
    @end="drag = false"
    ghost-class="ghost"
    v-bind="dragOptions"
  >
    <div v-for="(item, index) in data" :key="index">
      {{ item.name + item.age + item.address }}
    </div>
  </draggable>
</template>
<script>
import draggable from "vuedraggable";
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"],
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];

export default {
  data() {
    return {
      data,
    };
  },
  components: {
    draggable,
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost",
      };
    },
  },
};
</script>
<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>

效果图：