You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+6-5Lines changed: 6 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,10 +15,10 @@ The goal was to have a wrapper that:
15
15
* supports Vue 3
16
16
* is **light** and easy to maintain
17
17
* works as a **directive**, for example to conditionally enable / disable the drag-and-drop feature without having to change the whole component
18
-
* doesn't iterates on the data by itself
19
-
* doesn't update the underlying data model (more on that later)
18
+
* doesn't iterate on the data by itself
19
+
* doesn't update the underlying data model (see [Order mutation](#order-mutation))
20
20
21
-
As a reference, here are the wrappers that I tested:
21
+
As a reference, here are other Sortable wrappers:
22
22
*[`vuedraggable`](https://www.npmjs.com/package/vuedraggable) only supports Vue 2
23
23
*[`vuedraggable@next`](https://www.npmjs.com/package/vuedraggable) supports Vue 3, but adds a lot of overhead on top of Sortable
24
24
*[`vue-sortable`](https://www.npmjs.com/package/vue-sortable) is totally outdated (last update is from 2016)
@@ -60,7 +60,7 @@ Install the package:
60
60
npm install --save vue3-sortablejs
61
61
```
62
62
63
-
Register the plugin in your `App.vue` file:
63
+
Register the plugin in `App.vue`:
64
64
```js
65
65
importVueSortablefrom"vue3-sortablejs";
66
66
@@ -100,7 +100,7 @@ You can pass an object of options, in order to affect the behavior of the direct
100
100
101
101
## Events
102
102
103
-
A custom `ready` event will be triggered as soon as Sortable is registered on the component. You can use it to access the Sortable instance.
103
+
A custom `ready` event will be triggered as soon as Sortable is registered on the component. You can use it to access the underlying Sortable instance.
104
104
As well, you can listen to any native Sortable event.
105
105
106
106
*`@ready`: Sortable is ready and attached to the component
@@ -197,6 +197,7 @@ It is highly recommended to set a **key on the children items**, to help Sortabl
197
197
```
198
198
199
199
In the same way, if you use the `group` option, it is highly recommended to set a **key on the parent** itself. Otherwise the DOM managed by Sortable can become out-of-sync with the actual data state. I have noticed this helps a lot when using Sortable with complex components.
200
+
200
201
The key must be based on the number of items the parent contains. This will force a re-render when an item is added / removed, and make Sortable re-initialize and start from a clean state every time. This may seem a bit hacky, but it's the only way to keep a consistant behavior.
0 commit comments