시리즈 관리 - 드래그 앤 드롭으로 순서변경 기능 추가

src/api/audio_content_series.js

@@ -55,6 +55,13 @@ async function removeContentInTheSeries(seriesId, contentId) {
     )
 }
 
+async function updateSeriesOrders(ids) {
+    return Vue.axios.put(
+        "/creator-admin/audio-content/series/orders",
+        {ids: ids}
+    )
+}
+
 export {
     getGenreList,
     getSeriesList,
@@ -62,6 +69,7 @@ export {
     modifySeries,
     getSeriesDetail,
     getSeriesContent,
+    updateSeriesOrders,
     addingContentToTheSeries,
     removeContentInTheSeries,
     searchContentNotInSeries

src/views/Content/ContentSeriesList.vue

@@ -22,10 +22,15 @@
           </v-btn>
         </v-col>
       </v-row>
-      <v-row
+      <div
         ref="scroll_container"
         class="scroll_container"
         @scroll="onScroll"
+      >
+        <draggable
+          v-model="series_list"
+          class="row"
+          @end="onDropCallback(series_list)"
         >
           <v-col
             v-for="(item, i) in series_list"
@@ -63,7 +68,8 @@
               </v-card-actions>
             </v-card>
           </v-col>
-      </v-row>
+        </draggable>
+      </div>
     </v-container>
 
     <v-dialog
@@ -349,10 +355,11 @@
 
 <script>
 import * as api from '@/api/audio_content_series';
+import Draggable from "vuedraggable";
 
 export default {
   name: "ContentSeriesList",
-
+  components: {Draggable},
   data() {
     return {
       is_loading: false,
@@ -497,6 +504,17 @@ export default {
       this.$router.push({name: 'ContentSeriesDetail', params: {seriesId: series.seriesId}})
     },
 
+    async onDropCallback(items) {
+      const ids = items.map((item) => {
+        return item.seriesId
+      })
+
+      const res = await api.updateSeriesOrders(ids)
+      if (res.status === 200 && res.data.success === true) {
+        this.notifySuccess(res.data.message)
+      }
+    },
+
     async getSeriesGenreList() {
       try {
         const res = await api.getGenreList()