Use vuedraggable in vue project

Recently, I am learning a visual construction project, and the drag and drop used in it is draggable.js. After reading several Chinese documents, there are many pits, which may be the reason for not being updated in time.

VUe 

It is recommended to look at the official documentation of vuedraggable, which is only in English. Official documentation: https://github.com/SortableJS/Vue.Draggable ;

Since vue3 is already the default version, vuedraggable also has its own version corresponding to vue2.0 and 3.0, which can be installed directly using the basic command:

npm install vuedraggable --save

Versions around 2.1 will be installed by default. Since my project is built with vue3, an error will be reported:

That is, the draggable version is wrong, causing the error, and the version transposition 4.1.0 will solve it

npm i [email protected] --save 或 yarn add [email protected]

In the official website, the different versions of vue are specially explained. In vue2,

<draggable v-model="myArray" 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,
        },
  ...

With transition-group:

<draggable v-model="myArray">
    <transition-group>
        <div v-for="element in myArray" :key="element.id">
            {
   
   {element.name}}
        </div>
    </transition-group>
</draggable>

 In vue3, it is problematic to write this way, the official website prompts:

Breaking changes:

1. Use  item slot instead of default to display elements#Use item slot instead of default to display elements
2. Provide a key for items using  itemKey props#Use itemKey prop to provide a key for items

The change is indeed quite large, and it is written as follows:

From:

<!-- vue 2 version -->
<draggable v-model="myArray">
   <div v-for="element in myArray" :key="element.id">{
   
   {element.name}}</div>
</draggable>

To:

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

 When using transitions, you should now use tag and componentData to create transitions

From

<!-- vue 2 version -->
<draggable v-model="myArray">
    <transition-group name="fade">
        <div v-for="element in myArray" :key="element.id">
            {
   
   {element.name}}
        </div>
    </transition-group>
</draggable>

to

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

Note: When performing clone, the configuration item writing in the Draggable component of vue2.x version (:options="{group:{name: 'article',pull:'clone'}, sort: false}") does not work in vue3 take effect,

In vue3, the parameters inside need to be configured separately, such as: :group="{name: 'article',pull:'clone'}" :sort='false' and so on.