SortableJS-vue3 demo

Source on GitHub

  1. First run yarn add sortablejs-vue3 sortablejs
  2. Then add
    import { Sortable } from "sortablejs-vue3"
    in your <script setup>
  3. Finally use the component:
    <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>
          
Props

Open your console to view the events being logged while you interact with the list below.

One
One-One
One-Two
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen
Seventeen
Eighteen
Nineteen
Twenty