真是拖累...

為什麼要讓元素可以拖曳？
可拖曳元素可以顯著提高各種應用程式的可用性，例如：

1. 儀表板：使用者可以重新排列小部件以滿足他們的喜好。
2. 圖片庫：使用者可以重新定位影像以獲得更好的佈局。
3. 任務板：使用者可以在不同欄位之間拖曳任務。

實作可拖曳元素

讓我們深入研究程式碼！下面是一個使 HTML 元素可拖曳的 JavaScript 函數。此功能可讓您指定啟動拖曳操作的句柄元素，從而提供更受控的使用者體驗。

`function makeElementDraggable(selector: string, handleSelector?: string): void {
const DraggableElements: HTMLElement[] = 選擇器.startsWith("#")
？ [document.getElementById(selector.slice(1)) as 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. 老鼠事件：

• mousedown：當使用者在手把上按下滑鼠按鈕時，我們開始追蹤移動。
• mousemove：當使用者按住按鈕的同時移動滑鼠時，我們會根據目前滑鼠位置更新可拖曳元素的位置。
• mouseup：當使用者釋放滑鼠按鈕時，我們停止追蹤移動。

1. 定位：可拖曳元素的位置是使用 CSS 屬性（左側和頂部）設定的。位置設定為固定，允許將其放置在視窗上的任何位置。

直接使用它：-
makeElementDraggable('#myDraggableElement', '.handle');

在此範例中，#myDraggableElement 將使用 .handle 作為拖曳手把來拖曳。
結論
在 Web 應用程式中實現可拖曳元素可以大大增強互動性和使用者滿意度。提供的程式碼片段提供了一種以最少的設定實現此目的的簡單方法。在您的專案中嘗試一下，看看它如何改進您的使用者介面！

你也可以在 React 中做同樣的事情，創建一些自訂鉤子，例如 useDraggable ，它會做同樣的事情。
謝謝，再見

以上是真是拖累...的詳細內容。更多資訊請關注PHP中文網其他相關文章！