排序预览

package-lock.json

@@ -20,6 +20,7 @@
         "tinymce": "^5.10.9",
         "vue": "^2.6.14",
         "vue-router": "^3.6.5",
+        "vuedraggable": "^2.24.3",
         "vuex": "^3.6.2"
       },
       "devDependencies": {
@@ -14934,6 +14935,11 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -17280,6 +17286,14 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "dependencies": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "node_modules/vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",

package.json

@@ -26,6 +26,7 @@
     "tinymce": "^5.10.9",
     "vue": "^2.6.14",
     "vue-router": "^3.6.5",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

src/views/book/courseware/create/components/common/SettingMixin.js

@@ -7,7 +7,7 @@ import SelectSerialNumberStyle from '@/views/book/courseware/create/components/b
 const mixin = {
   data() {
     return {
-      param: {},
+      param: {}, // 组件设置时传过来的特有参数
       switchSerialNumber,
       computedQuestionNumber,
       snGenerationMethodList,

src/views/book/courseware/preview/components/sort/SortPreview.vue

@@ -1,18 +1,37 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="select-preview" :style="getAreaStyle()">
     <SerialNumberPosition :property="data.property" />
 
-    <div class="main"></div>
+    <div class="main">
+      <ul class="option-list">
+        <draggable v-model="data.option_list" animation="300">
+          <transition-group
+            class="group"
+            :style="{
+              flexDirection: data.property.arrange_direction === arrangeTypeList[0].value ? 'row' : 'column',
+            }"
+          >
+            <li v-for="(item, i) in data.option_list" :key="i">
+              <span class="rich-text" v-html="sanitizeHTML(item.content)"></span>
+            </li>
+          </transition-group>
+        </draggable>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script>
+import draggable from 'vuedraggable';
+
 import { getSortData, arrangeTypeList } from '@/views/book/courseware/data/sort';
 
 import PreviewMixin from '../common/PreviewMixin';
 
 export default {
   name: 'SortPreview',
+  components: { draggable },
   mixins: [PreviewMixin],
   data() {
     return {
@@ -29,5 +48,22 @@ export default {
 
 .select-preview {
   @include preview-base;
+
+  .option-list {
+    .group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+
+      li {
+        min-height: 40px;
+        padding: 8px 16px;
+        cursor: move;
+        background: $content-color;
+        border: 1px solid $content-color;
+        border-radius: 4px;
+      }
+    }
+  }
 }
 </style>