質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

2903閲覧

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

Take_st

総合スコア7

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2019/08/26 01:41

編集2019/08/26 04:09

前提・実現したいこと

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

hogerb

1#app 2 .container-fluid.mb-4.ml-4.py-4.border.w-50 3 ul 4 draggable 5 li haha 6 li hiha 7 li foooo 8 li ah-hun

hoge.js

hogejs

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

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


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

hugarb

1#app 2 .container-fluid.mb-4.ml-4.py-4.border.w-50 3 table.table.border 4 thead 5 tr 6 th ID 7 th 名前 8 th 学年 9 draggable 10 tr 11 td 1 12 td Han 13 td G1 14 tr 15 td 2 16 td Kin 17 td G2 18 tr 19 td 3 20 td Foo 21 td G1 22 tr 23 td 4 24 td Alice 25 td G3

huga.js

hugajs

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

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

試したこと

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

投稿2019/08/26 03:13

編集2019/08/26 03:15
yuhigash

総合スコア327

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Take_st

2019/08/26 04:21

yuhigash さん、回答ありがとうございます! 教えていただいた方法で実行してみると、きちんと動作するtableを作成することができました。 ずっとグーグルで調べていて、公式のissueで検索することをしておりませんでした。 表題の内容に加え、公式issueを調べるということもとても勉強になりました! ありがとうございますm(_ _)m
Take_st

2019/08/26 06:51 編集

<今後このページを見られる方のために> element="tbody"のようにelementを使うことは推奨されないらしく、代わりにtag="tbody"という風にtagを使うのが推奨されているそうです。 参考https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#element-props
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問