Dojo dnd：アバターのポジショニング

Question

dojoツールキットのdnd APIを使用してアバターの位置を変更することはできますか？現時点では、ドラッグすると、ドラッグされたアイテムのアバターがマウスカーソルの右下に表示されます。マウスカーソルと同じ位置に配置する必要があります。アプリケーションでいくつかのユーザビリティテストを実行しましたが、ほとんどの人は、ドロップエリアにカーソルを移動するのではなく、ドロップエリアにアバターをドラッグしようとするようです。どんな入力でもいいでしょう。ありがとう！

Answer 1

申し訳ありませんが、技術的な理由により不可能です。

更新：一般的な要望により、これらは技術的な理由です：

• マウスのすぐ下にノードがある場合、ノードはすべてのマウスイベントを取得します。
• マウスイベントが親チェーンをバブルアップします。
• マウスでこのノードを移動することを想像してください＆＃8212;このノードは常にすべてのマウスイベントを取得します。
• 他のノード、たとえば、ターゲットは、移動したノードの親でない限り、マウスイベントを取得できないことを意味します。通常、これは当てはまりません。

しかし、他の人ができることは知っています！可能になるはずです！はい、可能です＆＃8230;原則として：

• すべてのターゲットノードを登録しましょう。
• 関連するマウス移動イベントを最上位の親（ドキュメント）で直接キャッチしましょう。
• ドラッグ操作を検出したら、次のことを行います。
  1. すべてのターゲットのジオメトリ（境界ボックス）を計算します。
  2. マウスを動かすたびに、現在のマウスの位置がターゲットと重なっているかどうかを確認できます。 ＆quot; A +＆quot;のボーナスポイントスチューデント：他のノードとの重複を検出します。たとえば、表面的な理由でターゲットが部分的に不明瞭な場合など、この状況を正しく処理します。
  3. 現在のマウスの位置がターゲットと重なっている場合、「ドロップ可能」を開始しましょう。アクション、たとえば、いくつかのキューを表示して、エンドユーザーが今すぐドロップできることを認識します。

Dojoがそうしないのはなぜですか？いくつかの技術的な理由により（最終的には到達しました！）：

• ノードのジオメトリ計算は、ほとんどのブラウザでバグが多いことで有名です。テーブルが関与するか、他の重要な配置手段があれば、境界ボックスが正しいことを100％確信することはできません。
• ジオメトリ計算は高価な操作であり、ドラッグ操作中に変更ができないことを前提として、すべてのターゲットのすべてのドラッグ操作で少なくとも1回実行する必要があります（常にそうであるとは限りません）。ブラウザは多くの理由でノードをリフローする場合があります＆＃8658;既存のターゲットを移動/サイズ変更できるため、注意する必要があります。
• 通常、計算されたボックスはリストに保持されます＆＃8658;交差点のリストをチェックすることはO（n）（線形）＆＃8658;ターゲットの数が増えるとうまくスケーリングしません。
• すべてのマウスイベントハンドラは高速である必要があります。そうしないと、ブラウザのマウスイベント処理機能が「破損」する可能性があります予測不可能な副作用につながります。マウスイベントの処理が遅くなる理由については、前のポイントを参照してください。
• 線形検索の改善が可能です。たとえば、2D空間ツリーを使用できますが、より多くの（さらに多くの）JavaScriptコードになります＆＃8658;クライアント側でダウンロードするその他のもの＆＃8658;通常は価値がありません。

どうやってそれを知るのですか？ Dojoは以前のバージョンではこの種のドラッグアンドドロップを使用していたため、上記で説明した戦闘の問題にうんざりしていました。改善は困難な戦いであり、コードサイズが増加しました。最後に、ブラウザにすでに組み込まれているメカニズムを再発明および複製することを決定しました。ブラウザはほぼ同じ作業を行います。ノードのジオメトリを計算し、基になるノードを見つけて、マウス移動イベントを適切にディスパッチします。

現在の実装では、マウス移動イベントを使用せず、ジオメトリを計算しません。代わりに、ドラッグの開始後にターゲットによって検出されたマウスオーバー/アウトイベントに依存します。確実に機能し、拡張性に優れています。

この話のもう一つのしわ：Dojoはターゲットをコンテナーとして扱います＆＃8212;非常に一般的な使用例（ショッピングカート、アイテムの並べ替え、階層の編集）。現在、線形コンテナと汎用ツリーが実装されていますが、カスタムコンテナも可能です。ドラッグアンドドロップすると、ドラッグされたアイテムをターゲットコンテナ内の適切な位置に表示およびドロップできます。たとえば、既存のアイテムの間に挿入します。幾何学的な計算とチェックを使用してこの機能を実装すると、非常に高価になります。