One
One-One
One-Two
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen
Seventeen
Eighteen
Nineteen
Twenty
yarn add sortablejs-vue3 sortablejs
import { Sortable } from "sortablejs-vue3"
in your <script setup>
<Sortable :list="list" :itemKey="itemKey" options="options" @choose="(event) => console.log(event)" @end="(event) => console.log(event)"> <template #item="{element, index}"> <div class="draggable" :key="element.id"> {{ element.name }} </div> </template> </Sortable>
options
: An object supporting all SortedJS options. See Sortable on GitHub for a full list. list
: An array-like object of elements to be made draggable. itemKey
: A key to index the elements of the list. tag
: The element type to render as. Defaults to div
. Open your console to view the events being logged while you interact with the list below.