答题项目pc版完工v1.1

package.json

     "vue-axios": "^3.4.0",
     "vue-axios-plugin": "^1.3.0",
     "vue-router": "3.0.6",
+    "vuedraggable": "^2.24.3",
     "vuex": "3.1.0"
   },
   "devDependencies": {

src/api/question.js

   url: `/admin/question/${id}`, params
 })
 
+/**
+ * 更新游戏题目顺序
+ * @param {*} data
+ * @returns
+ */
+export const UpdateQuestionSort = (data, id) => request({
+  url: `/admin/game/${id}/sort`, method: 'put', data
+})

src/components/Question/index.vue

           @click="handleAdd"
         >添加题目</el-button>
       </div>
-      <ul style="list-style-type: none;margin:24px 0 0 -40px">
+      <!-- <ul style="list-style-type: none;margin:24px 0 0 -40px">
         <li v-for="item,index in tableData" :key="index" class="questionli" @click="handleEdit(item)">
           <span style="width:45px">第{{ index+1 }}题</span>
           <span style="width:45px">{{ item.optType === 'single'?'单选题':item.optType==='many'?'多选题':'判断题' }}</span>
             <el-button slot="reference" type="text" style="color:red">删除</el-button>
           </el-popconfirm>
         </li>
-      </ul>
+      </ul> -->
+      <draggable v-model="tableData" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @end="onEnd">
+        <transition-group>
+          <div v-for="item,index in tableData" :key="index" class="questionli" @click="handleEdit(item)">
+            <span style="width:45px">第{{ index+1 }}题</span>
+            <span style="width:45px">{{ item.optType === 'single'?'单选题':item.optType==='many'?'多选题':'判断题' }}</span>
+            <span style="flex:1">{{ item.title }}</span>
+            <el-popconfirm
+              style="width:30px"
+              icon="el-icon-info"
+              icon-color="red"
+              title="确定删除这个问题吗？"
+              @onConfirm="handleDelete(item)"
+            >
+              <el-button slot="reference" type="text" style="color:red">删除</el-button>
+            </el-popconfirm>
+          </div>
+        </transition-group>
+      </draggable>
       <el-pagination
         v-show="questionTotal!==0"
         style="float:right; margin:24px 0"
   </div>
 </template>
 <script>
-import { getQuestionList } from '@/api/question'
+import { getQuestionList, UpdateQuestionSort } from '@/api/question'
 import { deleteGameLeverQuestion } from '@/api/gamelevelquestion'
+import draggable from 'vuedraggable'
 
 export default {
+  // 注册draggable组件
+  components: {
+    draggable
+  },
   props: {
     gameId: {
       type: String,
     }
   },
   methods: {
+    // 拖拽结束事件
+    onEnd() {
+      const sortList = []
+      this.tableData.map((item, index) => {
+        sortList.push({ sortNo: index, serialNo: item.gameQuestionMapId })
+      })
+      UpdateQuestionSort(sortList, this.gameId)
+    },
     handleSizeChange(val) {
       this.pageSize = val
       this.changePagination()

yarn.lock

   dependencies:
     is-plain-obj "^1.0.0"
 
+sortablejs@1.10.2:
+  version "1.10.2"
+  resolved "https://registry.npmmirror.com/sortablejs/download/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
+  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
+
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/source-list-map/download/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   resolved "https://registry.npmmirror.com/vue/download/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
 
+vuedraggable@^2.24.3:
+  version "2.24.3"
+  resolved "https://registry.npmmirror.com/vuedraggable/download/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
+  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
+  dependencies:
+    sortablejs "1.10.2"
+
 vuex@3.1.0:
   version "3.1.0"
   resolved "https://registry.npmmirror.com/vuex/download/vuex-3.1.0.tgz#634b81515cf0cfe976bd1ffe9601755e51f843b9"