ウィジェットとプリセットをドラッグ&ドロップ

1）コンセプトとシナリオ

ドラッグ&ドロップウィジェットは、ユーザーがグリッドを参照してキャンバス上に自由に配置するインタラクティブブロック（グラフカード、テーブル、フィルター、アクションボタン）です。プリセット-保存されたレイアウトとスタイル（レイアウト+テーマ+パラメータ）をすばやく適用、共有、バージョン管理できます。

典型的なシナリオ：

準備ができたブロック（KPIカード、グラフ、フィルタ）からのダッシュボードのアセンブリ。
プリセット「コンパクト」「アナリティクス」「プレゼンテーション」を通じてレイアウトを素早く変更します。
共同編集：製品はウィジェットを配置し、アナリストはソースを設定します。
ステークホルダーのための読み取り専用の出版物。

2）建築の原則

1.Grid-first：論理カラム/行（12/24）での位置決め、ピクセル-誘導体。
2.スナップ&ガイド：磁気ガイド、メッシュと隣人に固執、整列。
3.制約対応：サイズ/アスペクトリミッタ、最小/最大、ロックアスペクト。
4.Safe-by-default：連続オートセーブ、トランザクションパブリッシング、元に戻す/やり直し。
5.A11y-first：キーボードからのDnDとボイシングの変更。
6.リアルタイム対応：マルチプレイヤーセッション用のCRDT/OT。
7.テーマ別：デザイントークン、テーマプリセット、ライト/ダーク/コントラストモード。
8.ポータブル：エクスポート/インポートJSON/YAML；回路のバージョン管理。

3）データモデル（簡略化）

json
{
"id": "layout_01",
"name": "Analytics - Compact,"
"version": "2. 1. 0",
"grid": { "cols": 12, "rowHeight": 8, "gutter": 8, "margin": 16 },
"theme": { "preset": "light-pro", "tokens": { "radius": 12, "elevation": "soft" } },
"widgets": [
{
"id": "w_kpi_1",
"type": "kpi",
"title": "GGR",
"pos": { "x": 0, "y": 0, "w": 3, "h": 4, "z": 1 },
"constraints": { "minW": 2, "minH": 3, "lockAspect": false },
"props": { "format": "currency", "source": "ggr_daily" }
},
{
"id": "w_chart_1",
"type": "lineChart",
"title": "Deposits Trend",
"pos": { "x": 3, "y": 0, "w": 6, "h": 8, "z": 1 },
"props": { "source": "deposits", "legend": true }
},
{
"id": "w_table_1",
"type": "table",
"title": "Top Segments",
"pos": { "x": 9, "y": 0, "w": 3, "h": 12, "z": 2 },
"props": { "source": "segments_top", "pageSize": 12 }
}
],
"meta": { "createdBy": "dima", "updatedAt": "2025-11-03T17:55:00Z" }
}

4）格子、スナップおよびガイド

格子：デスクトップのための12のスピーカー、タブレットのための6、電話のための4；'rowHeight'は安定した垂直ピッチでも同じです。
スナップ：エッジ/センターにスナップ。4/8 pxの「磁石」；近隣に近づくときのスマートなガイド。
自動流れ：衝突の場合の下の自動移動；「落下ブロック」アルゴリズム。
応答性：ブレークポイント→各ブレークポイントの代替'pos'。

5） DnDイベントと状態

Ссоссссииa： 'dragStart'、 'drag'、 'dragOver'、 'drop'、 'resizeStart'、 'resizeEnd'、 'select'、 'group'、 'ungroup'、 'reorder'、 'undo'、 'redo'。

アメリカ合衆国：

ゴースト/プレビュー-ドラッグ中に半透明のパス。
プレースホルダー：許可ゾーン（緑）、禁止ゾーン（赤）。
衝突マップ-占有セル（ビットセット/インターバルツリー）の迅速な計算。

6）昇給、整列、Zインデックス

コーナーでグリップを再調整+プロポーションを維持するために"Shift'を押します。
グループの配置：「left/right」、「center」、「distribute everly」。
オーバーレイレベル：範囲制限付き'z'、前後ボタン。

7）グループ、コンテナ、ネスティング

グループ：複数の選択、ドラッグアンドドロップの組み合わせ、グループアライメント。
ウィジェットコンテナ：タブ、アコーディオン、カルーセル-彼らは子供のウィジェットを受け入れる方法を知っています。
コンテナ停止：外部グリッド≠内部（他の列）。

8）プリセット（テンプレート）とバージョン

プリセットの種類：レイアウト、テーマ、ウィジェットセット、レイアウト+データ。
バージョン管理：'semver'スキームとマイグレーション（フィールドマップ、デフォルト）。
適用する前にプレビュー&適用プレビュー。
スコープ付きプリセット：個人、チーム、グローバル；権利の読み取り/編集。
エクスポート/インポート：JSON/YAML、チェックサム署名、バージョン互換性チェック。

9）アクセシビリティ（A11y）とキーボード

フルキーボードDnD：

'Enter/Space'-転送を開始します。矢印-グリッド間隔に移動します。'Shift'+矢印-加速された間隔；'Esc'-キャンセル。
'Ctrl/Cmd+G'-グループ；'Ctrl/Cmd+Shift+G'-グループを解除します。
'Alt'-グリッドへのスナップを一時的にオフにします。
音声演技SR： "（x、 y）に移動しました。スティッキング：オン。競合：はい/いいえ"
フォーカスリング、大口径ハンドル、説明付きドロップゾーン。

10）タッチとモバイルパターン

DnD開始のための長押し（300-500ミリ秒）。
ターゲットの増加（最小40-48 px）。

アダプティブツールバー（ボトムドック）

編集モード：キャンバスのスクロールロック、端に動くとき縦の自動スクロール。

11）ウィジェットからのアクション（実用的なウィジェット）

内蔵のCTA（ボタン）、コンテキストメニュー、ドラッグクローン（Alt-held duplication）。
ウィジェットの「クイックプリセット」（密度、凡例、カラースキーム）。
States： loading/empty/error、 secure stubs （「data is lagging」）。

12）コラボレーションと出版

リアルタイム：CRDT（例えば、Yjs）またはOT （Quillアプローチ）-参加者カーソル、グループロック。
権利：'Owner'、 'Editor'、 'Viewer'；不変スナップショットを公開します。

ストリーム： ドラフト→レビュー→パブリケーション；変更の比較（差分レイアウト）

13）元に戻す/やり直し、自動保存

コマンドバス：各操作は'do/undo'を持つコマンドです。
クライアントにログオンします（インメモリ+周期的な持続）、長さの制限。
自動保存：N秒ごと/「アイドル」、「保存」インジケータ付き。

14） Temizationおよび設計トークン

json
{
"themeId": "light-pro",
"tokens": {
"fontScale": { "h1": 24, "h2": 18, "body": 14 },
"radius": 12,
"elevation": "soft",
"palette": { "primary": "#3366FF", "critical": "#E53935" }
}
}

レイアウトを再計算せずにテーマを切り替える（ビジュアルトークンのみ）。
AA/AAAコントラスト、ハイコントラストモード、正しいグレーのダークテーマ。

15）パフォーマンス

レイヤーによるレンダリング（複雑なグラフの場合はキャンバス/webgl、クロムの場合はDOM）。
リスト/テーブル仮想化、スロットル'ドラッグ'（16ミリ秒）、requestAnimationFrame。
Diff render：変更されたウィジェットのみを再描画します。
キャッシュカウントの衝突とガイドライン。

16）コンテンツのセキュリティと保護

HTMLウィジェットのSunbox （iframe、 CSP、 'sandbox'フラグ）。
ドロップ制限：ホワイトリストタイプ（ファイル、リンク、JSONプリセット）；サイズおよび内容の点検。
プリセット（RBAC/ABAC）、エクスポート/インポート監査の権利。

17）ウィジェットAPI（契約）

ts interface Widget {
id: string;
type: string;
pos: { x:number; y:number; w:number; h:number; z:number };
constraints?: { minW?:number; minH?:number; maxW?:number; maxH?:number; lockAspect?:boolean };
props: Record<string, unknown>;
validate? (props): { ok: boolean; errors?: string[] };
onDrop? (dataTransfer): DropResult ;//support for external drop onAction? (actionId: string, payload?: any): void;
}

ライフサイクルイベントは'mount'、 'resize'、 'visibilityChange'です。
公開前にPropsの検証を行います。

18）インポート/エクスポートと移行

エクスポート：'グリッド'、'ウィジェット'、'テーマ'、'メタ'。
インポート：スキーマバージョンのチェック、自動マイグレーション（フィールドマップ/デフォルト）、レポート。
完全性を確保するためにハッシュ付きのロックファイルプリセット。

19）ホットキー（推奨）

ナビゲーション：'-移動；'Shift'+矢印-クイックステップ。
Recise： 'Alt'+矢印。
操作：'Ctrl/Cmd+D'-重複；'Ctrl/Cmd+G'-グループ；'Ctrl/Cmd+Shift+G'-グループを解除します。
レベル：'［'/'］'-z-indexに戻る/進む。
元に戻す/やり直し：'Ctrl/Cmd+Z'/'Ctrl/Cmd+Shift+Z'（\'Y'）。
プリセット：'Ctrl/Cmd+1。。9'-すぐに保存されたものを適用します。

20） UXパターン

最初の起動時のクイックガイド（3-5ステップのマイクロオンボーディング）。
グリッドモード：「グリッドの表示/非表示」を切り替えます。
衝突のインラインヒント（「unavailable： minimum widget width=3」）。
Layout History：前のバージョンに戻ります。

21）テストプラン

単位：衝突計算、スナップ、拘束バリデータ。
統合：DnDマウス/タップ/キーボード；グループ化；コンテナ。
E2E：ダッシュボードの一から組み立て、プリセットの適用、パブリッシュ、エクスポート/インポート。
カオス：レンダリング遅延、接続の喪失（リアルタイム）、権利の競合。
A11y：キーボードスクリプト、SR音声演技、コントラスト。

22）実装チェックリスト

グリッド/ブレークポイントとスナップ設定
Recise/groups/alignment workとテスト済み
キーボードのDnDとスクリーンヒントが有効になっています
自動保存、元に戻す/やり直し、レイアウト履歴
プリセット：バージョン、権利、エクスポート/インポート
テーマとデザイントークン、ハイコントラストモード
リアルタイムのコラボレーションと紛争解決
ドロップ制限、ファイル検証、サンドボックスHTML
メトリクス：採用、最初の配置までの時間、衝突エラー

23）ミニFAQ

なぜ自由座標ではなくグリッドだけなのか？
グリッドは、アライメント、コロナウイルス、プリセットの移植性とパフォーマンスを簡素化します。

ブレークポイントの異なるレイアウトを保存する方法は？
各ウィジェットには、ブレークポイント（デスクトップ/タブレット/モバイル）に「ポス」があり、自動的にフォールバックされます。

OTまたはCRDTのコラボレーションに何を選択しますか？
CRDTはオフライン/競合の方が簡単です。OT-リニアテキスト操作でOK。レイアウトのために、CRDTはより頻繁に取られます。

合計

グッドドラッグアンドドロップウィジェットは「ドラッグアンドドロップ」だけではありません。"厳格なグリッドとスナップ、便利なグループとアライメント、キーボードのアクセシビリティ、バージョンとエクスポートの安定したプリセット、出版物とコラボレーションの安全性。信頼できるデータモデル、よく考えられたUX、テストプランの周りにこれを構築すると、コンストラクタはコンテンツとコマンドの成長に迅速で理解しやすく耐性があります。

ウィジェットとプリセットをドラッグ&ドロップ

合計

お問い合わせ

迅速な連絡

動画はまもなく更新されます

現在、私たちはプロジェクトで非常に多忙です