【开发实践】在线考试系统（三） Sortable实现试题的重排序

一、需求分析

        开发一个在线考试系统，在教师组卷功能模块中，需要对已经选择的试题进行重排序，获得所需试题顺序的试卷。

如下是试卷编辑页面，需要在将已经选中的试题重排顺序。

二、技术引入 

1、sortable.js

sortable.js 官方github网址

Sortable 是一个用于可重新排序的拖放列表的 JavaScript 库

【特点】

• 支持触摸设备和现代浏览器（包括IE9）
• 可以从一个列表拖动到另一个列表或在同一列表中拖动
• 移动项目时的 CSS 动画
• 支持拖动手柄和可选文本（比voidberg的html5sortable更好）
• 智能自动滚动
• 高级交换检测
• 流畅的动画
• 多拖动支持
• 支持 CSS 转换
• 使用原生 HTML5 拖放 API 构建

【资源导入】

Install with NPM:

$ npm install sortablejs --save

Install with Bower:

$ bower install --save sortablejs

Import into your project:

// 默认 SortableJS
import Sortable from 'sortablejs';

// Core SortableJS(没有默认插件)
import Sortable from 'sortablejs/modular/sortable.core.esm.js';

// 完成SortableJS(所有插件)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js';

Cherrypick plugins:

// Cherrypick extra plugins
import Sortable, { MultiDrag, Swap } from 'sortablejs';

Sortable.mount(new MultiDrag(), new Swap());


// Cherrypick default plugins
import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';

Sortable.mount(new AutoScroll());

---

2、入门案例

【简单使用】

<ul id="items">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>
var el = document.getElementById('items');
var sortable = Sortable.create(el);

 三、需求实现

1、vue中重排序方法

setSort(){
      let that = this;
      const tbody = this.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      Sortable.create(tbody , {
      	animation: 300,
      	onEnd: evt => {
            // 请求接口排序，后面具体需要什么参数，获取就行了，每个人需要不一样
            that.testPaper.testPaperQuestionList.splice(evt.newIndex, 0, that.testPaper.testPaperQuestionList.splice(evt.oldIndex, 1)[0])
            let newArray = that.testPaper.testPaperQuestionList.slice(0)
            that.testPaper.testPaperQuestionList = []
            that.$nextTick(function () {
                that.testPaper.testPaperQuestionList = newArray
            })
            that.PaperQuestionList= newArray;
	   	 } 
      })
    }

【注意】： 需要在钩子函数mounted或者create中，调用该方法初始化。

2、效果展示