|  | @@ -14,13 +14,17 @@
 | 
	
		
			
				|  |  |        </div>
 | 
	
		
			
				|  |  |        <div class="exercise-list">
 | 
	
		
			
				|  |  |          <ul>
 | 
	
		
			
				|  |  | -          <li v-for="(item, i) in index_list" :key="i" :class="['exercise-item', { active: i === curIndex }]">
 | 
	
		
			
				|  |  | -            <SvgIcon icon-class="child" :size="20" />
 | 
	
		
			
				|  |  | -            <span class="item-name nowrap-ellipsis" @click="selectExerciseItem(i)">
 | 
	
		
			
				|  |  | -              {{ i + 1 }}. {{ exerciseNames[item.type] }}
 | 
	
		
			
				|  |  | -            </span>
 | 
	
		
			
				|  |  | -            <SvgIcon icon-class="copy" class="pointer" :size="10" @click="copy(i)" />
 | 
	
		
			
				|  |  | -          </li>
 | 
	
		
			
				|  |  | +          <draggable v-model="index_list" animation="300" @end="onEnd">
 | 
	
		
			
				|  |  | +            <transition-group>
 | 
	
		
			
				|  |  | +              <li v-for="(item, i) in index_list" :key="i" :class="['exercise-item', { active: i === curIndex }]">
 | 
	
		
			
				|  |  | +                <SvgIcon icon-class="child" :size="20" />
 | 
	
		
			
				|  |  | +                <span class="item-name nowrap-ellipsis" @click="selectExerciseItem(i)">
 | 
	
		
			
				|  |  | +                  {{ i + 1 }}. {{ exerciseNames[item.type] }}
 | 
	
		
			
				|  |  | +                </span>
 | 
	
		
			
				|  |  | +                <SvgIcon icon-class="copy" class="pointer" :size="10" @click="copy(i)" />
 | 
	
		
			
				|  |  | +              </li>
 | 
	
		
			
				|  |  | +            </transition-group>
 | 
	
		
			
				|  |  | +          </draggable>
 | 
	
		
			
				|  |  |          </ul>
 | 
	
		
			
				|  |  |        </div>
 | 
	
		
			
				|  |  |        <div class="list-operate">
 | 
	
	
		
			
				|  | @@ -74,17 +78,20 @@ import {
 | 
	
		
			
				|  |  |    GetQuestionInfo,
 | 
	
		
			
				|  |  |    GetExerciseInfo,
 | 
	
		
			
				|  |  |    UpdateExercise,
 | 
	
		
			
				|  |  | +  MoveQuestion,
 | 
	
		
			
				|  |  |  } from '@/api/exercise';
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  import CreateMain from './components/create.vue';
 | 
	
		
			
				|  |  |  import PreviewQuestionTypeMixin from '../data/PreviewQuestionTypeMixin';
 | 
	
		
			
				|  |  |  import SelectQuestionType from './components/common/SelectQuestionType.vue';
 | 
	
		
			
				|  |  | +import draggable from 'vuedraggable';
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  export default {
 | 
	
		
			
				|  |  |    name: 'CreateExercise',
 | 
	
		
			
				|  |  |    components: {
 | 
	
		
			
				|  |  |      CreateMain,
 | 
	
		
			
				|  |  |      SelectQuestionType,
 | 
	
		
			
				|  |  | +    draggable,
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    mixins: [PreviewQuestionTypeMixin],
 | 
	
		
			
				|  |  |    provide() {
 | 
	
	
		
			
				|  | @@ -286,6 +293,24 @@ export default {
 | 
	
		
			
				|  |  |        let type = arr[arr.length - 1];
 | 
	
		
			
				|  |  |        this.index_list[this.curIndex].type = type;
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | +    /**
 | 
	
		
			
				|  |  | +     * 移动题目
 | 
	
		
			
				|  |  | +     * @param {object} param0 移动参数
 | 
	
		
			
				|  |  | +     * @param {number} param0.newIndex 移动后的索引
 | 
	
		
			
				|  |  | +     */
 | 
	
		
			
				|  |  | +    onEnd({ newIndex }) {
 | 
	
		
			
				|  |  | +      MoveQuestion({
 | 
	
		
			
				|  |  | +        question_id: this.index_list[newIndex].id,
 | 
	
		
			
				|  |  | +        dest_question_id: this.index_list[newIndex + 1].id,
 | 
	
		
			
				|  |  | +        dest_position: 0,
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +        .then(() => {
 | 
	
		
			
				|  |  | +          this.$message.success('移动成功');
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +        .catch(() => {
 | 
	
		
			
				|  |  | +          this.$message.error('移动失败');
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |  };
 | 
	
		
			
				|  |  |  </script>
 |