场景:
实现拖拽排序
效果图:
vue2实现拖拽排序效果
安装:
# 使用 npm 安装
npm install vuedraggable --save
# 使用 yarn 安装
yarn add vuedraggable
注册使用:
import draggable from 'vuedraggable';
、、、
components:{draggable}
代码:
<draggable v-model="hyjgChecklistItems" :options="{ handle: '.drag-handle', animation: 200 }">
<div v-for="item in hyjgChecklistItems" style="margin-bottom: 20px;">
<span class="drag-handle">大项名称:</span><el-input placeholder="请输入大项" v-model="item.name" style="width: 50%;"></el-input>
<el-button type="danger" icon="el-icon-delete" size="small"
@click="delName(item)">删除</el-button>
<el-button type="primary" icon="el-icon-plus" size="small" circle
@click="addItem(item)"></el-button>
<!-- <div>
显示顺序:<el-input-number v-model="item.sort" :min="1" :max="10"></el-input-number>
<el-button @click="addItem(item)">+新增小项</el-button>
</div> -->
<draggable v-model="item.children" :options="{ handle: '.drag-handle', animation: 200 }">
<div v-for="item2 in item.children" style="padding-left: 50px;margin-top: 10px;">
<span class="drag-handle">小项名称:</span> <el-input placeholder="请输入小项" v-model="item2.item" style="width: 60%;"></el-input>
<el-button type="danger" icon="el-icon-minus" size="mini" circle
@click="delItem(item, item2)"></el-button>
</div>
</draggable>
</div>
</draggable>
这里组件是可以嵌套使用的,但是要注意给组件添加options属性,添加handle,指定可拖拽元素。
v-model绑定的是可拖拽元素的列表。
以上便实现了图示中的效果,较为详细配置说明可参考: