应用vuedraggable插件
- 装置npm install vuedraggable -S(可能须要装置Sortable)
- 页面援用import draggable from 'vuedraggable'
- 页面注册组件components: { draggable },通过draggable标签应用
- 调用update办法,该办法事件返回新索引和旧索引,数据同样是响应式的
<draggable v-model="postForm.recite" @update="datadragRecite"> <div class="content-box" v-bind:key="index" v-for="(item, index) in postForm.recite" > <el-input v-model="item.text" type="textarea" rows="3" placeholder="请输出必背内容"/> </div> </draggable>
methods办法
datadragRecite(evt) { console.log('拖动前的索引 :' + evt.oldIndex) console.log('拖动后的索引 :' + evt.newIndex);}