エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
Vue3でのドラッグドロップ対応ツリービュー開発: phphe/he-treeで実現した最適化方法 - GMO MAKESHOP engineer blog
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
Vue3でのドラッグドロップ対応ツリービュー開発: phphe/he-treeで実現した最適化方法 - GMO MAKESHOP engineer blog
GMOメイクショップ コアグループ フロントエンドエンジニアの原田です。業務でVue3向けツリービューライ... GMOメイクショップ コアグループ フロントエンドエンジニアの原田です。業務でVue3向けツリービューライブラリ phphe/he-treeを使い、ドラッグドロップ対応の大規模なツリービューを開発したので、その実装の流れをご紹介します。 課題 対応の検討 ライブラリ選定 選定のポイント 1 vue3を想定して開発されているか 2 ドラッグドロップに単一ライブラリで対応しているか 3 遅延描画に対応しているか 4 十分なドキュメントとデモが存在しているか 類似ライブラリ vue3-treeview 解決策 出来上がったもの 工夫点 移動可能条件設定 その1: ツリーにできない要素を移動不可にする その2: 同名の要素を同一階層に置けないようにする 折り畳み状態の保持 パフォーマンスの最適化 ドラッグドロップ以外の手段での並び替えとの併用 困った点 ドラッグ可能判定の書き方に癖有り バリデーシ