為什麼要讓元素可以拖曳？
可拖曳元素可以顯著提高各種應用程式的可用性，例如：
實作可拖曳元素
讓我們深入研究程式碼！下面是一個使 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);
});
}`
如何運作
選擇元素：函數接受 CSS 選擇器來識別要使其可拖曳的元素。您可以指定 ID（使用 #）或類別（使用 .）。可選的第二個參數可讓您定義將啟動拖曳的手把元素。
老鼠事件：
直接使用它：-
makeElementDraggable('#myDraggableElement', '.handle');
在此範例中，#myDraggableElement 將使用 .handle 作為拖曳手把來拖曳。
結論
在 Web 應用程式中實現可拖曳元素可以大大增強互動性和使用者滿意度。提供的程式碼片段提供了一種以最少的設定實現此目的的簡單方法。在您的專案中嘗試一下，看看它如何改進您的使用者介面！
你也可以在 React 中做同樣的事情，創建一些自訂鉤子，例如 useDraggable ，它會做同樣的事情。
謝謝，再見
以上是真是拖累...的詳細內容。更多資訊請關注PHP中文網其他相關文章！
