[vue draggable] CDN으로 table draggable 드래그앤드랍 구현

리스트에서 드래그앤드랍을 구현하기 위해서 vue의 draggable 라이브러리를 사용하기로 결정하였다. webpack방식이 아닌 cdn방식으로 구현하였으며, vue 버전은 3.2.31 의 vue.global.js 를 사용하였다. 또한 draggable 구현을 위해 sortable과 vue-draggable-next를 사용하였다. 막상 구현하고 보니 매우 간단하였다. 아래 코드를 참고.

 

1. 스크립트 추가

<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script src="https://unpkg.com/vue-draggable-next@2.1.1/dist/vue-draggable-next.global.js"></script>

 

2. 컴포넌트 마운트

const app = Vue.createApp(displayApp);
app.component("draggable", VueDraggableNext["VueDraggableNext"]);
app.mount("#displayApp");

 

3. draggable 구현

<style>
.sortable-handle {cursor: move;}
.sortable-ghost {background : #c6ddf5;}
</style>


<template v-if="contents">
    <draggable is="contents" v-model="contents" :options="{ghostClass:'sortable-ghost'}" handle =".sortable-handle"@change="draggableChange()" tag="tbody">
        <template v-for="(item, index) in contents" :key="item.contentsIndex">
            <tr>
                <td><span class="sortable-handle"><i class="fa-sharp fa-solid fa-bars"></i></span></td>
                <td>{{ item.displayOrder }}</td>
                <td>{{ item.contentsIndex }}</td>
                <td>{{ item.contentsName }}</td>                
            </tr>
        </template>
    </draggable>
</template>

 

4. 번호 재정렬

draggableChange(){
    let locationNo = 1;
    this.contents.forEach(element => {
        element.displayOrder = locationNo++;
    });
},

 

 

위와 같이 구현하고 실행하면 된다.