Heim > Artikel > Web-Frontend > Was für ein Widerstand...
Warum Elemente ziehbar machen?
Ziehbare Elemente können die Benutzerfreundlichkeit in verschiedenen Anwendungen erheblich verbessern, wie zum Beispiel:
Schiebbare Elemente implementieren
Lassen Sie uns in den Code eintauchen! Unten finden Sie eine JavaScript-Funktion, die ein HTML-Element ziehbar macht. Mit dieser Funktion können Sie ein Griffelement angeben, das die Ziehaktion auslöst und so ein kontrollierteres Benutzererlebnis bietet.
`function makeElementDraggable(selector: string, handleSelector?: string): void {
const draggableElements: HTMLElement[] = selector.startsWith("#")
? [document.getElementById(selector.slice(1)) als 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); });
}`
Wie es funktioniert
Elemente auswählen: Die Funktion akzeptiert einen CSS-Selektor, um die Elemente zu identifizieren, die Sie ziehbar machen möchten. Sie können entweder eine ID (mit #) oder eine Klasse (mit .) angeben. Mit einem optionalen zweiten Parameter können Sie ein Handle-Element definieren, das das Ziehen auslöst.
Mausereignisse:
Um dies direkt zu verwenden :-
makeElementDraggable('#myDraggableElement', '.handle');
In diesem Beispiel wird #myDraggableElement mit .handle als Ziehgriff ziehbar gemacht.
Fazit
Die Implementierung ziehbarer Elemente in Ihren Webanwendungen kann die Interaktivität und Benutzerzufriedenheit erheblich verbessern. Das bereitgestellte Code-Snippet bietet eine einfache Möglichkeit, dies mit minimalem Setup zu erreichen. Probieren Sie es in Ihren Projekten aus und sehen Sie, wie es Ihre Benutzeroberfläche verbessert!
Sie können das Gleiche auch in „React“ tun und einige benutzerdefinierte Hooks wie „useDraggable“ erstellen, die das Gleiche tun.
Danke, TSCHÜSS
Das obige ist der detaillierte Inhalt vonWas für ein Widerstand.... Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!