Rubu on Railsプロジェクト内で、Vue.Draggableを使ってtableの行のドラッグアンドドロップをしたい

Question

前提・実現したいこと

Ruby on Railsを使ったアプリの中で、Vue.Draggableを使ってtableの行のドラッグアンドドロップをしたいです。

作業環境

ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin18]
Rails 5.0.7.2

vueはvuejs-rails (2.5.13)というgemでRailsに導入しています。
また、Vue.DraggableはCDNで導入しています。

<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

実現したいデモ

https://sortablejs.github.io/Vue.Draggable/#/table-example

試したこと

まずはスモールステップとして、li要素の並び替えからトライしてみました。（bootstrapを導入しています。）

hoge.rb↓

#app
  .container-fluid.mb-4.ml-4.py-4.border.w-50
    ul
      draggable
        li haha
        li hiha
        li foooo
        li ah-hun

hoge.js↓

var app = new Vue({
  el: "#app"
});

こちらは正常に動作し、li要素を上下に入れ替える事ができました。

---

問題があるのは次の表のドラッグアンドドロップです。
huga.rb↓

#app
  .container-fluid.mb-4.ml-4.py-4.border.w-50
    table.table.border
      thead
        tr
          th ID
          th 名前
          th 学年
      draggable
        tr
          td 1
          td Han
          td G1
        tr
          td 2
          td Kin
          td G2
        tr
          td 3
          td Foo
          td G1
        tr
          td 4
          td Alice
          td G3

huga.js↓

var app = new Vue({
  el: "#app"
});

cocsole.logなどでファイルが読み込まれているのは確認済みです。
並び替えたいtr要素の上にdraggableが設定できているので、これで動いてほしいのですが…

試したこと

Vue.Draggable公式のサンプルコードを真似しようとしてみましたが、結果的にうまく行っていません…

おそらく記法に問題があると思うのですが、原因がわかっていません。
公式のサンプルコードは.vueという単一ファイルコンポーネントを使って書いている一方で、私のコードは.rbと.jsファイルに分けて書いています。

なにかわかる方がいらっしゃいましたら、ご教授お願いしますm(_ _)m

Answer 1

Vue.draggableのサンプルでは動作しませんでした。Github Issueでも何件か挙がっています。

https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/table-example.vue
https://github.com/SortableJS/Vue.Draggable/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aclosed+table

動的なコンポーネント (is属性) として「draggable」を設定し、draggableのelement属性でtbodyを指定すると正常に動作しました。
draggableのtag属性では、「div」として設定されてしまうため、element属性で設定してあげるのが良さそうです。

https://jp.vuejs.org/v2/api/#is
https://codepen.io/yuhigash/pen/gOYmGjQ

Comments

[Take_st]

yuhigash さん、回答ありがとうございます！

教えていただいた方法で実行してみると、きちんと動作するtableを作成することができました。

ずっとグーグルで調べていて、公式のissueで検索することをしておりませんでした。
表題の内容に加え、公式issueを調べるということもとても勉強になりました！

ありがとうございますm(_ _)m

[Take_st]

＜今後このページを見られる方のために＞
element="tbody"のようにelementを使うことは推奨されないらしく、代わりにtag="tbody"という風にtagを使うのが推奨されているそうです。

参考https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#element-props