Web /Vue js tip

Vue.Draggable LIst Drag UI

백곳 2018. 11. 28. 23:32

Vue.Draggable LIst Drag UI


이분야 에서는


/Sortable 


가 대세인것 같아 각종 wrap 들 API가 많다.

그중에 vue에 맞춘 wrap 이 있다.

아래가 데모 이다 

사용해본 결과 잘된다 ..


https://github.com/SortableJS/Vue.Draggable#readme


그리고 똑같은


https://sagalbot.github.io/vue-sortable/


wrap가 있는데 현제 사용이 안되니 낚이지 말자


demo gif




https://david-desmaisons.github.io/draggable-example/


Typical use:

<draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

.vue file:

  import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...