Maison >interface Web >js tutoriel >QUEL TRAÎNEMENT...
Pourquoi rendre les éléments déplaçables ?
Les éléments déplaçables peuvent améliorer considérablement la convivialité dans diverses applications, telles que :
Implémentation d'éléments déplaçables
Plongeons dans le code ! Vous trouverez ci-dessous une fonction JavaScript qui permet de déplacer un élément HTML. Cette fonction vous permet de spécifier un élément de poignée qui lance l'action de glissement, offrant une expérience utilisateur plus contrôlée.
`function makeElementDraggable(selector: string, handleSelector?: string): void {
const draggableElements : HTMLElement[] = selector.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); });
}`
Comment ça marche
Sélection d'éléments : La fonction accepte un sélecteur CSS pour identifier le ou les éléments que vous souhaitez rendre déplaçables. Vous pouvez spécifier soit un ID (en utilisant #), soit une classe (en utilisant .). Un deuxième paramètre optionnel permet de définir un élément handle qui initiera le glissement.
Événements de souris :
Pour l'utiliser directement :-
makeElementDraggable('#myDraggableElement', '.handle');
Dans cet exemple, #myDraggableElement sera rendu déplaçable en utilisant .handle comme poignée de déplacement.
Conclusion
La mise en œuvre d'éléments déplaçables dans vos applications Web peut considérablement améliorer l'interactivité et la satisfaction des utilisateurs. L'extrait de code fourni offre un moyen simple d'y parvenir avec une configuration minimale. Essayez-le dans vos projets et voyez comment il améliore votre interface utilisateur !
Vous pouvez également faire la même chose dans React, créer des hooks personnalisés comme useDraggable qui feront la même chose.
Merci, BYEEE
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!