Vue.js 3.x で vue.draggable.next を 試す

https://github.com/SortableJS/vue.draggable.next

デモはこちら。https://sortablejs.github.io/vue.draggable.next/#/simple

テーブルでのサンプル

https://github.com/SortableJS/vue.draggable.next/blob/master/example/components/table-example.vue

を実行してようと思ったが、デモの main.js を見ると

https://github.com/SortableJS/vue.draggable.next/blob/master/example/main.js

依存するものが他にもあるようで、いったん断念。。。

<html>

<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>

<script type=“text/x-template” id=“draggable-table”>
<template>

<div class="row">
  <div class="col-8">
    <h3>Draggable table</h3>

    <table class="table table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Id</th>
          <th scope="col">Name</th>
          <th scope="col">Sport</th>
        </tr>
      </thead>
      <draggable v-model="list" tag="tbody" item-key="name">
        <template #item="{ element }">
          <tr>
            <td scope="row">{{ element.id }}</td>
            <td>{{ element.name }}</td>
            <td>{{ element.sport }}</td>
          </tr>
        </template>
      </draggable>
    </table>
  </div>

  <rawDisplayer class="col-3" :value="list" title="List" />
</div>

</template>
</script>

<script type=“module”>

import * as VueDraggableNext from 'https://unpkg.com/vue-draggable-next';

const app = {

name: "table-example",
display: "Table",
order: 8,
template: '#draggable-table',
components: {
  draggable: VueDraggableNext
},
data() {
  return {
    list: [
      { id: 1, name: "Abby", sport: "basket" },
      { id: 2, name: "Brooke", sport: "foot" },
      { id: 3, name: "Courtenay", sport: "volley" },
      { id: 4, name: "David", sport: "rugby" }
    ],
    dragging: false
  };
}

};
Vue.createApp(app).mount(“#app”);
</script>
<style scoped>
.buttons {

margin-top: 35px;

}
</style>
</html>