在线预览

<template>
  <div class="c">
    <vuedraggable
      handle=".handle"
      class="list-group"
      tag="ul"
      v-model="list"
      v-bind="dragOptions"
      @start="drag = true"
      @end="drag = false"
    >
      <transition-group type="transition" :name="!drag ? 'list' : null">
        <div class="item handle" v-for="(v, i) in list" :key="v">{{ v }}</div>
      </transition-group>
    </vuedraggable>
  </div>
</template>

<script>
import vuedraggable from "vuedraggable";
export default {
  components: { vuedraggable },
  data() {
    return {
      drag: false,
      dragOptions: {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost",
        handle: ".handle",
      },
      list: [1, 2, 3, 4, 5, 6, 7, 8],
    };
  },
  methods: {
    // :move="move"
    move(e) {
      console.log("fsdfd");
      console.log(e);
      return true;
      // 拖拽的目的索引不能是1
      // if (e.draggedContext.futureIndex == 1) {
      //   return false;
      // }
    },
  },
};
</script>

<style>
.item {
  padding: 10px 0;
  border: 1px solid #eee;
}
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateX(30px);
}
</style>