vue.draggable实现表格拖拽排序效果

npm install vuedraggable
npm install sortablejs

import draggable from \'vuedraggable\';
import Sortable from \'sortablejs\';

export default {
  components: {
    draggable,
    Sortable
  },
  ....

<Row class=\"draggableTable-head\">
  <Col span=\"1\">序号</Col>
  <Col span=\"2\">商品条码</Col>
  <Col span=\"3\">商品名称</Col>
  <Col span=\"1\">单位</Col>
</Row>
<draggable class=\"list-group\" v-model=\"tableData\" :options=\"{draggable:\'.rows\'}\"
  :move=\"getdata\" @update=\"datadragEnd\">
  <Row class=\"rows\" v-for=\"(item,index) in tableData\" :key=\"index\">
    <Col span=\"1\">
      <div class=\"cell\">{{index+1}}</div>
    </Col>
    <Col span=\"2\">
      <div class=\"cell\">{{item.barCode}}</div>
    </Col>
    <Col span=\"2\">
      <div class=\"cell\">{{item.name}}</div>
    </Col>
    <Col span=\"2\">
      <div class=\"cell\">{{item.unit}}</div>
    </Col>
  </Row>
</draggable>

getdata (data) {
  // console.log(\'getdata方法\');
},
datadragEnd (evt) {
  // console.log(\'datadragEnd方法\');
  console.log(\'拖动前的索引 :\' + evt.oldIndex)
  console.log(\'拖动后的索引 :\' + evt.newIndex)
}