Variant Form 3

vuedraggable is a Vue 3.0 component that provides drag-and-drop functionality by wrapping Sortable.js. Key features include:

• Synchronization: Automatically keeps the HTML list and your Vue view model array in sync.
• Sortable.js Parity: Supports touch devices, drag handles, selectable text, smart auto-scrolling, and drag-and-drop between different lists.
• Vue 3 Compatibility: Works with Vue.js 3.0 transition-group.
• UI Library Integration: You can make existing UI components (like Vuetify, Element, or Vue Material) draggable using the tag and componentData props.
• No jQuery: Zero dependency on jQuery.
• Event Reporting: Provides events to report changes for full manual control.

To use VForm 3 in your existing Vue 3 project, install the vform3-builds package using npm or yarn.

npm i vform3-builds
# or
yarn add vform3-builds

You can add non-draggable elements inside the draggable component using the header and footer slots. These elements will appear at the top or bottom of the draggable list but will not be part of the sortable items.

<draggable v-model="myArray" item-key="id">
  <template #item="{element}">
    <div> {{element.name}} </div>
  </template>
  <template #header>
    <button @click="addPeople">Add to Top</button>
  </template>
  <template #footer>
    <button @click="addPeople">Add to Bottom</button>
  </template>
</draggable>

To add animations to your list, use the tag prop to specify transition-group. If you need to pass specific props to the transition component (like the animation name), use the component-data prop.

<!-- Basic transition -->
<draggable v-model="myArray" tag="transition-group" item-key="id">
  <template #item="{element}">
      <div> {{element.name}} </div>
  </template>
</draggable>

<!-- Transition with specific name -->
<draggable v-model="myArray" tag="transition-group" :component-data="{name:'fade'}" item-key="id">
  <template #item="{element}">
    <div>{{element.name}}</div>
  </template>
</draggable>

When upgrading from the Vue 2 version, note these breaking changes:

1. Slots: Use the item slot instead of the default slot. You can no longer use v-for directly inside the component.
2. Keys: Use the item-key prop to provide a key for items.
3. Transitions: Use the tag prop and component-data prop to implement transitions instead of wrapping the component in a <transition-group>.

<!-- Vue 2 (Old) -->
<draggable v-model="myArray">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

<!-- Vue 3 (New) -->
<draggable v-model="myArray" item-key="id">
  <template #item="{element}">
    <div>{{element.name}}</div>
  </template>
</draggable>

If you are not using a package manager, you can include the dependencies directly via CDN. Note that vuedraggable requires both vue and sortablejs to be present in the environment.

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js"></script>

After installation, import VForm3 and its required CSS. VForm 3 requires element-plus to be installed and registered. Registering VForm3 globally provides both the <v-form-designer> and <v-form-render> components.

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'  //引入element-plus库
import 'element-plus/dist/index.css'  //引入element-plus样式

import VForm3 from 'vform3-builds'  //引入VForm 3库
import 'vform3-builds/dist/designer.style.css'  //引入VForm3样式

const app = createApp(App)
app.use(ElementPlus)  //全局注册element-plus
app.use(VForm3)  //全局注册VForm 3(同时注册了v-form-designer和v-form-render组件)

app.mount('#app')

To use vuedraggable with Vue 3.0, install the @next version using your preferred package manager.

yarn add vuedraggable@next

# or

npm i -S vuedraggable@next

To use vuedraggable with Vuex, use a computed property with a getter and setter for the v-model. The getter retrieves the state, and the setter commits a mutation to update the list.

<draggable v-model='myList' item-key="id">
  <template #item="{element}">
    <div>{{element.name}}</div>
  </template>
</draggable>

computed: {
    myList: {
        get() {
            return this.$store.state.myList
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }
}

You can configure the designer to automatically fetch field lists from your backend API using the fieldListApi prop. The designer will use the provided URL and map the response data using labelKey and nameKey.

Example configuration:

{
  fieldListApi: {
    URL: 'https://api.example.com/fields',
    headers: { 'Authorization': 'Bearer token' },
    labelKey: 'display_name',
    nameKey: 'field_id'
  }
}