Add drag effect to Vue element component

Time:2021-7-16

Using the vuedraggable plug-in

  1. Install NPM install vuedraggable – S (sortable may be required)
  2. Page reference import draggable from ‘vuedraggable’
  3. Page registration component: {draggable}, using the draggable tag
  4. Call the update method, which returns the new index and the old index, and the data is also responsive
<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 = (please input required content) / >
    </div>
 </draggable>

Methods method

datadragRecite(evt) {
    Console.log ('index before dragging: '+ EVT. Oldindex)
    Console.log ('index after dragging: '+ EVT. Newindex');
}