プレゼンテーションのリンクはこちら:

bit.ly/lwc_dnd_ja

日本語

bit.ly/lwc_dnd_ja 		    
English

bit.ly/lwc_dnd

Don Robins

テクニカル エデュケーター
Salesforce MVP 認定 8 年連続
Salesforce 認定 PDII
Salesforce トレーニング パートナー
Salesforce 認定 インストラクター
書籍、投稿、記事、Trailhead の著者
Pluralsight "Salesforce Play by Play" のプロデューサー

トピック

ドラッグ アンド ドロップのユース ケース
ドラッグ アンド ドロップとは？
ドラッグ アンド ドロップの概念
Visualforce における標準 HTML
密結合・疎結合 LWC
さらに詳しく学ぶには

ここでは取り上げないトピック

フル ドラッグ アンド ドロップ JavaScript API
Aura におけるドラッグ アンド ドロップ
非 HTML プラットフォームにおけるドラッグ アンド ドロップ
モバイルおよびジェスチャー ベースのドラッグ アンド ドロップ

Salesforce ユース ケース


カンバン

Salesforceユース ケース


マッピング ロケーション

Salesforce ユース ケース


ファイルのアップロード

ドラッグ アンド ドロップとは？

ドラッグ アンド ドロップ

名詞

ユーザが、ある要素を選択して
ページの別の場所に移動させることができる
プログラム上の仕組み

ステップごとに見ていきましょう

ユーザが表示されたある要素を「クリック」
ユーザが画面上でその要素を「ドラッグ」
ユーザが画面上のどこかにその要素を「ドロップ」
その要素が別の場所に表示される
関連付けられたロジックがデータに影響を及ぼす可能性がある

HTML においてどのように機能するのか？

移動可能な要素は「ドラッグ可能」として設定
コンテナ要素セットはリスナーと設定
イベントリスナーは JavaScript ハンドラにバインド
ハンドラは DTO ペイロードとドロップ効果に設定
ハンドラは DOM とデータを操作
ある特定のハンドラのみ必要

2 種類の HTML 要素

ドラッグ可能な要素

ソース コンテナから
ターゲット コンテナに
ドラッグされた
選択要素
(例：URL、画像など)

ターゲット コンテナ

選択した要素のドラッグ元
および/または
ドロップ先になりえる
コンテナ要素
(例：Div、リストなど)

それぞれ独自のイベントを持つ

ドラッグ可能な要素

DragStart*
Drag
DragEnd

ターゲット コンテナ

DragEnter*
DragOver*
DragLeave
Drop*

複数のターゲット コンテナがある場合も多い

(ドラッグ可能な要素)

DragStart* イベント

ある要素が最初にドラッグされた時に起動
このイベントのハンドリングは必須
ドラッグされた要素の要素 ID を保存
ソース コンテナの要素 ID を保存
イベント DTO にデータおよびドロップ効果を読み込む
通常、CSS プレゼンテーションの設定に使用

(ドラッグ可能な要素)

Drag イベント

ある要素がドラッグされた時に起動
ミリ秒間隔で起動
このイベントのハンドリングは任意
通常、CSS プレゼンテーションの効果のために使用

(ドラッグ可能な要素)

DragEnd イベント

ドラッグ操作が終了した時に起動
このイベントのハンドリングは任意
通常、CSS プレゼンテーションの再設定のために使用

ターゲット コンテナ

DragEnter* イベント

アイテムが、有効なドロップターゲットに入った時に起動
このイベントのハンドリングは必須
ハンドラは preventDefault() を呼び出す必要がある
通常、CSS プレゼンテーションの再設定のために使用

ターゲット コンテナ

DragOver*イベント

アイテムが、有効なドロップターゲットにドラッグされた時に起動
ミリ秒間隔で起動
このイベントのハンドリングは必須
ハンドラは preventDefault() を呼び出すべき
通常、CSS プレゼンテーションの再設定のために使用

ターゲット コンテナ

DragLeave イベント

アイテムが、有効なドロップターゲットから出た時に起動
このイベントのハンドリングは任意
通常、CSS プレゼンテーションの再設定のために使用

ターゲット コンテナ

Drop* イベント

アイテムが、有効なドロップターゲットにドロップされた時に起動
このイベントのハンドリングは必須
ハンドラはpreventDefault() を呼び出すべき
ドラッグされた要素に関する DOM 変更を処理
あらゆる必須データ、あるいはロジックを処理
通常、CSS プレゼンテーションの再設定のために使用

標準 HTML
ドラッグ アンド ドロップを
Salesforce に
実装するには？

標準 HTML
ドラッグ アンド ドロップを Visualforce に実装する

Visualforce のデモをおこないます...

HTML マルチプル コンテナ


Div コンテナの集まりを宣言

ドラッグ可能な要素
(「新規」ソース コンテナ内)


ソース コンテナとドラッグ可能なアイテムを設定

可能性のあるドロップターゲット コンテナ
(「作動中」コンテナ)


コンテナをドロップターゲットとして設定

可能性のあるドロップターゲット コンテナ
(「エスカレートされた」コンテナ)


コンテナをドロップターゲットとして設定

イベントリスナーの設定


セレクタを使用して要素を取り込みリスナーを追加

DragStart イベントハンドラ


アイテムとコンテナ ID を保存

Drop イベントハンドラ


アイテム ID を取り込んでターゲットコンテナを親に再指定

標準 HTML
ドラッグ アンド ドロップを
Lightning Web コンポーネントに実装するには？

LWC と標準 HTML の相違点

どちらも DOM を操作、ただし異なる方法で…
LWC を使用してイベントを仲介
イベント DOT とドロップ効果を放棄…
カスタムイベントとデータペイロードを代わりに使用
データ操作を容易にする…
データ駆動型リアクティブ レンダリングを使用
(LWC においては標準 DOM 操作を避けること)

重要なポイント

LWC はドラッグ アンド ドロップイベントを
宣言およびハンドルしてカスタムイベントに仲介する

これらのメッセージはコンポーネント階層を上って
最上位のマスターコンポーネントに伝達される

マスターコンポーネントは、追跡されるプロパティに結合した
全てのデータを取り込んで更新する

追跡されるプロパティへの変更は
コンポーネント階層を下ってリアクティブレンダリングをトリガし
UI を最新の情報に更新する

2 種類のアーキテクチャにおけるアプローチ

密結合

コンポーネントは
ソースおよびターゲット
コンテナ コンポーネントへ / から
ドラッグできる

疎結合

コンテナコンポーネントは
App Builder によって
Flexipageに追加され
PubSubと交信する

密結合コンポーネント

疎結合コンポーネント

LWC のデモ...

ドラッグ可能なコンポーネント： Markup
(caseItem.html)


アイテムをドラッグ可能に設定し、イベントをワイヤリング

ドラッグ可能なコンポーネント： Style
(caseItem.css)


アイテムコンポーネントのドラッグスタイルを定義

ドラッグ可能なコンポーネント： Module
(caseItem.js)


ドラッグスタイルを設定し、ドラッグイベントを仲介

コンテナコンポーネント： Markup
(caseList.html)


コンテナとアイテムイベントの両方をワイヤリング

コンテナコンポーネント： Style
(caseList.css)


コンテナの DragOver スタイルを定義

コンテナコンポーネント：Module
(caseList.js)


コンテナのスタイルを変更するイベントを処理

コンテナコンポーネント：Module
(caseList.js)


ヘルパ機能を使ってスタイルを設定および再設定

コンテナコンポーネント：Module
(caseList.js)


アイテムの DragStart イベントを仲介

コンテナコンポーネント：Module
(caseList.js)


コンテナの Drop イベントを仲介

マスターコンポーネント：Markup
(casePicker.html)


マスターにコンテナイベントをワイヤリング

マスターコンポーネント： Module
(casePicker.js)


Apex と マスターコンポーネント：

マスターコンポーネント： Module
(casePicker.js)


@Wire 機能を使用してフィルタデータリストを取り込む

マスターコンポーネント： Module
(casePicker.js)


Drop 時にデータを確認、アップデートし、最新の情報に更新

重要なポイント

標準的なドラッグ アンド ドロップ イベントを理解する
フレームワークに逆らわない
カスタムイベントを活用する
データ機能を活用する
リアクティブ レンダリングを活用する
イベント ハンドラを使ってスタイルを変更する
データ処理にマスターコンポーネントを利用する

さらに詳しく学ぶには？

リファレンスアプリをダウンロードして徹底解剖


https://github.com/forcementor/lwc-dnd-demos

eBikes アプリをダウンロードして徹底解剖


https://github.com/trailheadapps/ebikes-lwc

標準 HTML 基礎知識を学ぶ


https://pluralsight.pxf.io/C0114

ハンドラでイベント伝播を停止する方法について学ぶ


Medium.com

ドラッグ アンド ドロップ HTML 標準について読む


Mozilla 開発者ネットワーク

この LWC 入門編を視聴する


https://pluralsight.pxf.io/C0066

Salesforce Play By Play ギャラリーを閲覧する

www.sfplaybyplay.com

トピック、著者、Trailhead クラスで検索およびフィルタ検索


www.sfplaybyplay.com

アンケートの後の次のステップ：

  • スポンサーを閲覧してください！
  • @donrobins と Pluralsight.com のフォローもよろしく！
  • 学んだ知識は Ohana と共有

このプレゼンテーションは Github で閲覧できます

bit.ly/lwc_dnd_ja