なんというドラッグ…

要素をドラッグ可能にする理由
ドラッグ可能な要素により、次のようなさまざまなアプリケーションでの使いやすさが大幅に向上します。

1. ダッシュボード: ユーザーは好みに合わせてウィジェットを並べ替えることができます。
2. 画像ギャラリー: ユーザーは画像の位置を変更してレイアウトを改善できます。
3. タスク ボード: ユーザーは、異なる列間でタスクをドラッグ アンド ドロップできます。

ドラッグ可能な要素の実装

コードを詳しく見てみましょう!以下は、HTML 要素をドラッグ可能にする JavaScript 関数です。この関数を使用すると、ドラッグ アクションを開始するハンドル要素を指定できるため、より制御されたユーザー エクスペリエンスが提供されます。

`function makeElementDraggable(selector: string, handleSelector?: string): void {
constraggableElements: HTMLElement[] = selector.startsWith("#")
? [document.getElementById(selector.slice(1)) HTMLElement]
: Array.from(document.getElementsByClassName(selector.slice(1)) as HTMLCollectionOf);

draggableElements.forEach((draggable) => {
  if (!draggable) return;

  const handleElement = handleSelector ? draggable.querySelector(handleSelector) as HTMLElement : draggable;
  if (!handleElement) return;

  let isMouseDown = false;
  let initX = 0, initY = 0, offsetX = 0, offsetY = 0;

  function mouseDown(e: MouseEvent): void {
    isMouseDown = true;
    handleElement.style.cursor = "default";
    offsetX = draggable.offsetLeft;
    offsetY = draggable.offsetTop;
    initX = e.clientX - offsetX;
    initY = e.clientY - offsetY;
    document.addEventListener("mousemove", mouseMove);
    document.addEventListener("mouseup", mouseUp);
  }

  function mouseMove(e: MouseEvent): void {
    if (!isMouseDown) return;
    const x = e.clientX - initX;
    const y = e.clientY - initY;
    draggable.style.setProperty("left", `${x}px`, "important");
    draggable.style.setProperty("top", `${y}px`, "important");
    draggable.style.position = "fixed"; 
  }

  function mouseUp(): void {
    isMouseDown = false;
    handleElement.style.cursor = "move";
    document.removeEventListener("mousemove", mouseMove);
    document.removeEventListener("mouseup", mouseUp);
  }

  handleElement.style.cursor = "move";
  handleElement.addEventListener("mousedown", mouseDown);
});

}`

仕組み

1. 要素の選択: この関数は、ドラッグ可能にする要素を識別する CSS セレクターを受け入れます。 ID (# を使用) またはクラス (. を使用) を指定できます。オプションの 2 番目のパラメーターを使用すると、ドラッグを開始するハンドル要素を定義できます。

2. マウスイベント:

• mousedown: ユーザーがハンドル上のマウス ボタンを押すと、動きの追跡が開始されます。
• mousemove: ユーザーがボタンを押しながらマウスを動かすと、現在のマウスの位置に基づいてドラッグ可能な要素の位置が更新されます。
• mouseup: ユーザーがマウスボタンを放すと、動きの追跡を停止します。

1. 位置: ドラッグ可能な要素の位置は、CSS プロパティ (左と上) を使用して設定されます。位置は固定に設定されているため、ビューポート上のどこにでも配置できます。

これを直接使用するには:-
makeElementDraggable('#myDraggableElement', '.handle');

この例では、#myDraggableElement は、ドラッグ ハンドルとして .handle を使用してドラッグ可能になります。
結論
Web アプリケーションにドラッグ可能な要素を実装すると、対話性とユーザー満足度が大幅に向上します。提供されているコード スニペットは、最小限のセットアップでこれを実現する簡単な方法を提供します。プロジェクトで試してみて、ユーザー インターフェイスがどのように改善されるかを確認してください!

react でも同じことを行うことができ、同じことを行う useDraggable のようないくつかのカスタム フックを作成します。
ありがとう、バイバイ

以上がなんというドラッグ…の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。