transition-group+拖拽用法
在vue中，`transition-group`是一个用于创建过渡动画的组件。它可以用于对列表进行动态排序和删除，并提供拖拽排序功能。
要在`transition-group`中实现拖拽排序的功能，可以按照以下步骤进行操作：
1. 在需要进行拖拽排序的列表外包裹`transition-group`组件，并添加一个唯一的`key`属性。
```html
<transition-group tag="ul" class="sortable-list" :key="listKey">
 
</transition-group>
```
2. 在data对象中添加一个`listKey`属性，用于重新渲染列表时更新`transition-group`组件。
```javascript
data() {
  return {
    listKey: 0,
    // 列表数据
  }
},
```
3. 使用第三方的拖拽库，例如`vuedraggable`，来实现拖拽排序的功能。可以通过安装和引入该库来使用。
```bash
npm install vuedraggable
```
```javascript
import draggable from 'vuedraggable';
export default {
  components: {
    draggable
  },
  // 其他代码
}
transition用法搭配```
```html
<transition-group tag="ul" class="sortable-list" :key="listKey">
  <draggable v-model="list" :element="'li'">
    <li v-for="(item, index) in list" :key="item.id">{{ item.name }}</li>
  </draggable>
</transition-group>
```
通过上述步骤，就可以在`transition-group`中实现拖拽排序的功能了。当拖拽顺序发生变化时，`list`数据会自动更新，并触发`transition-group`重新渲染。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。