Vue3 drag and drop plugin Vue.Draggable.next

Vue3 drag and drop plugin Vue.Draggable.next

vue.draggable.next 是一款vue3的拖拽插件,基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景，具体效果可见下图
How to find an elegant, concise and easy-to-use vue3 drag-and-drop plug-in, the author found this plug-in during the development process, so I made a simple share

Getting started example

Requirements: Implement a draggable list
1. Install the plug-in

yarn add vuedraggable@next
npm i -S vuedraggable@next

2. Introduce plug-ins

import {
    
    VueDraggableNext} from 'vue-draggable-next'

3. Component writing

 <vue-draggable-next
          v-model="columns" //列表数组
          tag="transition-group" //标签名
          handle=".row-nav"
        >
           <transition-group>
            <a-row v-for="item in columns"  :key="item.id"  class="row-nav">
              <div class="iconfont icon-icon_move row-nav-icon"></div>
              <a-col class="row-nav-text">
                <a-row class="title">{
    
    {
    
     item.name }}</a-row>
              </a-col>
              <a-switch
                v-model:checked="item.checked"
                class="row-switch"
                size="small"
              ></a-switch>
            </a-row>
          </transition-group>
        </vue-draggable-next>

References:
Official address Chinese document