話題を並び替えて投票できるように #52
話題を並び替えて投票できるように #52
Conversation
| } | ||
|
|
||
| onStop(e) { | ||
| console.log(e) | ||
| // TODO: DOMが確定する前にイベントが発生するため一時的にsetTimeoutしてる | ||
| setTimeout(() => { |
There was a problem hiding this comment.
sortable:stop を sortable:sorted にすれば、
setTimeout、要らなくなるのではないかと思うのですが、
如何でしょうか？
https://github.com/Shopify/draggable/tree/master/src/Sortable
There was a problem hiding this comment.
sortable:sortedだと、ドラッグ中にイベントが発生するので、ちょっと不適かな〜と思います。
（実は勉強会前にもりきよとsortedも試して、「これは違うね」となったのでした）
There was a problem hiding this comment.
sortable:sorted は、ソートのDOMへの反映後(DOM内でソートされた
とき)にセットした関数を呼びだすイベントですが、ドラッグ中にも
ソートがDOMに反映されるdraggableでは、(項目のドラッグ中に
ソートが発生するとセットした関数が呼ばれるのは、)確かに
不適切ですね。
sortable:stopは、(ドラッグ→)ドロップした時点でセットした関数を
呼び出すイベントで、呼び出す時点でDOMへの反映は完了して
いませんが、(ドロップした時点でセットした関数が
呼ばれる、ので、)こちらのほうが確かに適切ですね。
There was a problem hiding this comment.
@JunichiIto
この問題、やはりissueで上がっていたようです。
Shopify/draggable#334
そしてその解決策として、v1.0.0-beta.12でdrag:stoppedというイベントが追加されたみたいですね。
Shopify/draggable#420
ですので、sortableのバージョンを、現状の1.0.0-beta.8から1.0.0-beta.12に上げつつ、
sortable:stopイベントをdrag:stoppedイベントで置き換えれば解決しそうです！
There was a problem hiding this comment.
draggable、２年半くらい前に shopify が手を引いて、引き継ぐ
メンテナが現れず、開発が(ほぼ)停止している ので、替わりのライブラリ
(Sortable etc)にしたほうがよいかもしれません。
(shopifyの方(原作者？)がごく偶にプルリクをマージしてはいます。。。
https://github.com/Shopify/draggable/commits/master)
Draggable is no longer maintained by its original authors.
https://github.com/Shopify/draggable
Sortable
https://github.com/SortableJS/Sortable
https://sortablejs.github.io/Sortable/
SortableJSであっさりリスト並び替え
https://zenn.dev/sdkfz181tiger/articles/e5979cde0238c1
HTML ドラッグ & ドロップ API を直接利用するテもありはします。
HTML ドラッグ & ドロップ API
https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API
https://web.dev/i18n/ja/drag-and-drop/
参考：
Drag & Drop APIを使って要素の並べ替えを実装する
https://zenn.dev/kazuwombat/articles/f23b47f168f1d0
There was a problem hiding this comment.
stimulus-sortable を使うのはどうでしょうか？
https://www.stimulus-components.com/docs/stimulus-sortable/
| this.positionTargets.forEach((element, index) => { | ||
| element.value = index | ||
| }) | ||
| }, 0) |
There was a problem hiding this comment.
@morikiyo これ、0なのに問題が解決するのはなぜなんでしょう？1000とか500とかならsetTimeoutする意味があるのかなと思うんですが。（昨日聞けば良かった）
There was a problem hiding this comment.
私もよくわかってなかったので少し調べてみました。
タイムアウトが満了するまでに予想より長い時間がかかる理由は複数あります。この節では、もっとも一般的な理由を説明します。
なので 0 でも直ぐに実行されるわけではないようです。
これは setTimeout を遅延 0 で呼び出したとしても、直ちに実行するのではなくキューに載せて、次の機会に実行するようスケジューリングされるためです。現在実行中のコードはキューにある関数を実行する前に完了しなければならず、このために実行結果の順序が想定どおりにならない場合があります。
「タイムアウトの遅延」の項の説明がわかりやすかったです。
私の想像なのですが、ブラウザが DOM 操作に忙しくて setTimeout に登録したメソッドの処理が後回しになるから、良い感じに動くのではないかと。ただ処理順が保証されるものではないはずなので、DOM の状態をチェックする処理を挟んでリトライするなどした方が安全だろうとは思います。
| @@ -0,0 +1,5 @@ | |||
| class AddPositionToVoteDetails < ActiveRecord::Migration[7.0] | |||
| def change | |||
| add_column :vote_details, :position, :integer | |||
There was a problem hiding this comment.
validates :position, presence: true, numericality: { only_integer: true, greater_than_or_equal_to: 0 }みたいなバリデーションを付けた方がいいかも。
もしくはこう？
validates :position, presence: true, numericality: { in: 0.. }
|
次回の meetup で stimulus-sortable への載せ替えをするとして、このPRはマージします。 |
|
stimulus-sortable、ソースコードを読んだ感じ、SortableJSのonUpdate (stimulus-sortable、SortableJSのonUpdateイベント時に呼び出す |
No description provided.