开发指南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，依次类推。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。