draggable 组件使用（拖拽排序及拖拽交换功能 swap）

一、template 里

<draggable

  v-model="myArray"

  group="people"

  @start="drag = true"

  @end="drag = false"

>

  <div v-for="element in myArray" :key="element.id">{{ element.name }}</div>

</draggable>

<table>

  <draggable

    v-model="items"

    tag="tbody"

    :move="handleMove"

    @end="handleDragEnd"

    :options="{ animation: 500 }"

  >

    <tr class="movable" v-for="item in items" :key="item.id">

      <td>{{ item.id }}</td>

      <td>{{ item.name }}</td>

      <td>{{ item.age }}</td>

    </tr>

  </draggable>

</table>

 

二、data 里

myArray: [

  { id: 1, name: "name1" },

  { id: 2, name: "name2" },

  { id: 3, name: "name3" }

],

items: [

  { id: 1, name: "Bianka Effertz", age: 37 },

  { id: 2, name: "Mckayla Bogan", age: 20 },

  { id: 3, name: "Estevan Mann", age: 17 },

  { id: 4, name: "Cloyd Ziemann", age: 55 }

]

 

三、methods 里

handleDragEnd(e) {

  console.log(e);

  console.log(e.newIndex);

  console.log(e.oldIndex);

  console.log("dragEnd");

  this.futureItem = this.items[this.futureIndex];

  this.movingItem = this.items[this.movingIndex];

  const _items = Object.assign([], this.items);

  _items[this.futureIndex] = this.movingItem;

  _items[this.movingIndex] = this.futureItem;

  this.items = _items;

},

handleMove(e) {

  const { index, futureIndex } = e.draggedContext;

  this.movingIndex = index;

  this.futureIndex = futureIndex;

  return false; // disable sort

},