开发指南101-拖动排序

平台上实现拖动排序的标准方案如下：

依托组件：

SortableJS

界面元素:

      <el-table :data="sortlist" ref="sortTable">
        <el-table-column
          label="名称"
          header-align="center"
          align="center"
          prop="itemTitleEx"
          width="200"
        ></el-table-column>

       --其他列

        <el-table-column align="center" label="排序" width="80">
          <template slot-scope="scope">
            <svg-icon class="drag-handler" icon-class="drag" />
          </template>
        </el-table-column>
      </el-table>

      用el-table展示数据，最后一列显示拖动图标。其实拖动图标只是起个提示作用。点击行内即可拖动。

      核心处理：

      this.oldsortData = this.sortlist.map(v => v.itemID);
      this.newsortData = this.oldsortData.slice();

      this.sortable = Sortable.create(el, {
        animation: 300,
        ghostClass: "sortable-ghost",
        setData: function(dataTransfer) {
          dataTransfer.setData("Text", "");
        },
        onEnd: evt => {
          const tempIndex = this.newsortData.splice(evt.oldIndex, 1)[0];
          this.newsortData.splice(evt.newIndex, 0, tempIndex);
          this.newsortDataString = this.newsortData.join();
        }
      });

newsortDataString为拖动后id的序列串，将这个串返回后台接口调整顺序即可

后台接口一般处理方案，就是生成一段批处理sql，就是按newsortDataString的id顺序进行赋值操作，例如第一个赋值001，依次类推。