|
@@ -5,7 +5,13 @@
|
|
|
|
|
|
<div class="main">
|
|
|
<ul class="option-list">
|
|
|
- <draggable v-model="move_list" animation="300" @start="onStart($event)" @end="onEnd($event)">
|
|
|
+ <draggable
|
|
|
+ v-model="move_list"
|
|
|
+ :disabled="disabled"
|
|
|
+ animation="300"
|
|
|
+ @start="onStart($event)"
|
|
|
+ @end="onEnd($event)"
|
|
|
+ >
|
|
|
<transition-group
|
|
|
class="group"
|
|
|
:style="{
|
|
@@ -27,14 +33,14 @@
|
|
|
<template v-if="isShowRightAnswer && !is_all_right">
|
|
|
<div class="right-title">正确答案:</div>
|
|
|
<ul class="option-list">
|
|
|
- <draggable v-model="move_list" animation="300" :disabled="true">
|
|
|
+ <draggable v-model="right_answer_list" animation="300" :disabled="true">
|
|
|
<transition-group
|
|
|
class="group"
|
|
|
:style="{
|
|
|
flexDirection: data.property.arrange_direction === arrangeTypeList[0].value ? 'row' : 'column',
|
|
|
}"
|
|
|
>
|
|
|
- <li v-for="(item, i) in move_list" :key="i" :class="['drag-item', 'right']">
|
|
|
+ <li v-for="(item, i) in right_answer_list" :key="i" :class="['drag-item', 'right']">
|
|
|
<span class="rich-text" v-html="sanitizeHTML(item.content)"></span>
|
|
|
</li>
|
|
|
</transition-group>
|
|
@@ -61,6 +67,7 @@ export default {
|
|
|
data: getSortData(),
|
|
|
arrangeTypeList,
|
|
|
move_list: [], // 移动后的数组
|
|
|
+ right_answer_list: [], // 正确答案列表
|
|
|
drag: false,
|
|
|
clickIndexList: [], // 点击选中的索引
|
|
|
is_all_right: false, // 是否全对
|
|
@@ -83,6 +90,10 @@ export default {
|
|
|
this.is_all_right = this.move_list.every(
|
|
|
({ custom_serial_number }, index) => index + 1 === Number(custom_serial_number),
|
|
|
);
|
|
|
+
|
|
|
+ this.right_answer_list = this.data.option_list.toSorted(
|
|
|
+ (a, b) => Number(a.custom_serial_number) - Number(b.custom_serial_number),
|
|
|
+ );
|
|
|
},
|
|
|
immediate: true,
|
|
|
},
|