这次就把到手的武器改造一下之前的拖动排序的例子，就仨字——太爽啦！

 

样式同前

 

ul.item {

 

  list-style-type: disc;

 

  margin-block-start: 0;

 

  margin-block-end: 0;

 

  margin-inline-start: 0;

 

  margin-inline-end: 0;

 

  padding-inline-start: 0;

 

}

 

.item li {

 

  height: 50px;

 

  line-height: 50px;

 

  border: 1px solid #aaaaaa;

 

  width: 200px;

 

  padding: 0 10px;

 

  display: flex;

 

  align-items: center;

 

}

 

先把DOM渲染出来

 

new Vue（{

 

  el: "#drag",

 

  data: {

 

    draggingItem: null,

 

    lastItem: null,

 

    items: Array.from（{ length: 5 }, （_item, index） => （{

 

      key: index + 1 + "",

 

      name: "Item" + （index + 1），

 

    }）），

 

  },

 

}）;

 

模板是异常的简单

 

<transition-group name="flip-list" tag="ul" class="item">

 

  <li draggable="true" :key="item.key" v-for="item of items"

 

    {{item.name}}

 

  </li>

 

</transition-group>

 

然后可以在<transition-group>加name了。

 

<transition-group name="flip-list" tag="ul" class="item">

 

  <!-- 省略 -->

 

</transition-group>

 

当然也要加上配套的样式

 

.flip-list-move {

 

  transition: transform 0.3s;

 

}

 

下面就是给子元素加上事件了

 

<li draggable="true" :key="item.key" v-for="item of items" 

 

  @dragstart="dragstart（item）" @dragover="dragover（item）">

 

  {{item.name}}

 

</li>

 

就两个事件

 

dragstart: function （item） {

 

    this.draggingItem = item;

 

},

 

dragover: function （item） {

 

    if （item !== this.draggingItem && this.lastItem !== item） {

 

      const fromIndex = this.items.indexOf（this.draggingItem）;

 

      const toIndex = this.items.indexOf（item）;

 

      const temp = this.items[fromIndex];

 

      this.items[fromIndex] = this.items[toIndex];

 

      this.items[toIndex] = temp;

 

      this.items = […this.items];

 

    }

 

    this.lastItem = item;

 

}

 

这里我和之前的写法略作了改动，判断拖动元素和拖入元素不是同一个，还判断了拖入元素和上次拖入元素也不是同一个，不然会发生不停抖动的情况，因为拖动的时候发生了元素移动，导致反复触发dragover事件。

 

注意最后这里的this.items = […this.items]，因为上面是直接在索引上修改数组元素的，而Vue2的响应式对数组在索引上的修改察觉不到，所以重新给this.items赋值，不过好在有key的加持，Vue只会针对修改的部分进行更新，无须担心性能问题。

 

整个的解决方案把所有HTML、CSS代码都算入也就不满80行，让我切切实实感受到了<transition-group>的威力——大杀器也，如果在Vue应用中有列表型元素的动画需求，第一考虑的就该是它。