큐레이션 아이템 - 드래그 앤 드롭으로 순서변경 기능 추가

src/api/audio_content.js

@@ -7,7 +7,7 @@ async function getAudioContentList(status, page) {
     )
 }
 
-async function searchAudioContent(searchWord, page){
+async function searchAudioContent(searchWord, page) {
     return Vue.axios.get(
         "/admin/audio-content/search?search_word=" + searchWord +
         "&page=" + (page - 1) +
@@ -79,20 +79,27 @@ async function searchSeriesItem(curationId, searchWord) {
     return Vue.axios.get("/admin/audio-content/curation/search/series?curationId=" + curationId + "&searchWord=" + searchWord)
 }
 
-async function addItemToCuration(curationId, itemIdList){
+async function addItemToCuration(curationId, itemIdList) {
     return Vue.axios.post(
         "/admin/audio-content/curation/add/item",
         {curationId: curationId, itemIdList: itemIdList}
     )
 }
 
-async function removeItemInCuration(curationId, itemId){
+async function removeItemInCuration(curationId, itemId) {
     return Vue.axios.put(
         "/admin/audio-content/curation/remove/item",
         {curationId: curationId, itemId: itemId}
     )
 }
 
+async function updateItemInCurationOrders(curationId, itemIds) {
+    return Vue.axios.put(
+        "/admin/audio-content/curation/orders/item",
+        {curationId: curationId, itemIds: itemIds}
+    )
+}
+
 export {
     getAudioContentList,
     searchAudioContent,
@@ -111,5 +118,6 @@ export {
     searchSeriesItem,
     searchContentItem,
     addItemToCuration,
-    removeItemInCuration
+    removeItemInCuration,
+    updateItemInCurationOrders
 }

src/views/Content/ContentCurationDetail.vue

@@ -94,7 +94,11 @@
                   </th>
                 </tr>
               </thead>
-              <tbody>
+              <draggable
+                v-model="items"
+                tag="tbody"
+                @end="onDropCallback(items)"
+              >
                 <tr
                   v-for="item in items"
                   :key="item.id"
@@ -115,7 +119,7 @@
                   </td>
                   <td style="max-width: 200px !important; word-break:break-all; height: auto;">
                     <vue-show-more-text
-                      :text="item.detail"
+                      :text="item.desc"
                       :lines="3"
                     />
                   </td>
@@ -137,7 +141,7 @@
                     </v-btn>
                   </td>
                 </tr>
-              </tbody>
+              </draggable>
             </template>
           </v-simple-table>
         </v-col>
@@ -402,13 +406,14 @@
 </template>
 
 <script>
+import Draggable from 'vuedraggable';
 import * as api from "@/api/audio_content"
 import VueShowMoreText from 'vue-show-more-text'
 
 export default {
   name: 'ContentCurationDetail',
 
-  components: {VueShowMoreText},
+  components: {VueShowMoreText, Draggable},
 
   data() {
     return {
@@ -487,6 +492,26 @@ export default {
       this.search_item_list.push(item)
     },
 
+    async onDropCallback(items) {
+      const ids = items.map((item) => {
+        return item.id
+      })
+
+      try {
+        this.is_loading = true
+        const res = await api.updateItemInCurationOrders(this.curation_id, ids)
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess(res.data.message)
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
     async searchContentItem() {
       if (this.search_word.length < 2) {
         this.notifyError('검색어를 2글자 이상 입력하세요.')
@@ -586,6 +611,7 @@ export default {
         const res = await api.getCurationItems(this.curation_id)
         if (res.status === 200 && res.data.success === true) {
           this.items = res.data.data
+          console.log(this.items)
         } else {
           this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }