transition-group

 

https://vuejs.org/v2/api/#transition-group
模板1

<template>
  <div>
    <vuedraggable class="left" v-model="list1" group="people" :options="dragOptions">
      <transition-group tag="div">
        <div v-for="item in list1" :key="item" class="item">
          <p>{{ item }}</p>
        </div>
      </transition-group>
    </vuedraggable>

    <vuedraggable class="right" v-model="list2" group="people" :options="dragOptions">
      <transition-group tag="div">
        <div v-for="item in list2" :key="item" class="item">
          <p>{{ item }}</p>
        </div>
      </transition-group>
    </vuedraggable>
  </div>
</template>

<script>
import vuedraggable from "vuedraggable";
export default {
  data() {
    return {
      dragOptions: {
        animation: 120,
        scroll: true,
        group: "sortlist",
        ghostClass: "ghost-style",
      },
      list1: [1, 3, 5, 7, 9],
      list2: [2, 4, 6, 8, 10],
    };
  },
  components: {
    vuedraggable,
  },
};
</script>

<style scoped>
.item {
  width: 300px;
  height: 50px;
  background-color: #42b983;
  color: #ffffff;
  margin-top: 10px;
  transform: scale(0.9);
}
.left,
.right {
  display: inline-block;
  width: 40%;
  height: 500px;
  border: 2px solid #333;
}
</style>

　　

效果图

 

 

 模板2

<template>
  <draggable
    class="list-group"
    tag="ul"
    v-model="list"
    v-bind="{
      animation: 200,
      group: 'description',
      disabled: false,
      ghostClass: 'ghost',
    }"
  >
    <li class="list-group-item" v-for="element in list" :key="element.order">
      {{ element.name }}
      <!-- {{ element.style }} -->
    </li>
  </draggable>
</template>

<script>
import Draggable from "vuedraggable";

const message = [
  "vue.draggable",
  "draggable",
  "component",
  "for",
  "vue.js 2.0",
  "based",
  "on",
  "Sortablejs",
];

export default {
  components: {
    Draggable,
  },
  data() {
    return {
      list: message.map((name, index) => {
        console.log(name);
        return { name, order: index + 1 };
      }),
    };
  },
};
</script>
<style lang="scss">
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group {
  min-height: 20px;
  list-style: none;
}
.list-group-item {
  cursor: move;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
}
</style>

　　

效果图