应用vuedraggable插件

  1. 装置npm install vuedraggable -S(可能须要装置Sortable)
  2. 页面援用import draggable from 'vuedraggable'
  3. 页面注册组件components: { draggable },通过draggable标签应用
  4. 调用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);}