vue3拖拽插件vue-draggable-next

-

基于sortablejs；

npm地址：https://www.npmjs.com/package/vue-draggable-next

配置项：https://github.com/SortableJS/Sortable#options

 

import { VueDraggableNext as Draggable } from 'vue-draggable-next';

components: { HeaderTitle, TitlePanel, Draggable },

const myArray = ref([
      { id: 1, name: '1' },
      { id: 2, name: '2' },
      { id: 3, name: '3' },
      { id: 4, name: '4' },
    ])
    // 拖拽结束
    function dragEnd(e) {
      console.log('e', e)
    }
    return {
      myArray,
      dragEnd,
    }

html

　　　　<draggable v-model="myArray" @end="dragEnd">
        <transition-group>
          <div class="drag-item" v-for="element in myArray" :key="element.id">
            <span> {{ element.name }}--{{ element.id }}</span>
          </div>
        </transition-group>
      </draggable>

 

-