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 :

1. Tableaux de bord : les utilisateurs peuvent réorganiser les widgets en fonction de leurs préférences.
2. Galeries d'images : les utilisateurs peuvent repositionner les images pour une meilleure mise en page.
3. Tableaux de tâches : les utilisateurs peuvent faire glisser et déposer des tâches entre différentes colonnes.

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

1. 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.

2. Événements de souris :

• mousedown : lorsque l'utilisateur appuie sur le bouton de la souris sur la poignée, nous commençons à suivre le mouvement.
• mousemove : lorsque l'utilisateur déplace la souris tout en maintenant le bouton enfoncé, nous mettons à jour la position de l'élément déplaçable en fonction de la position actuelle de la souris.
• mouseup : lorsque l'utilisateur relâche le bouton de la souris, nous arrêtons de suivre les mouvements.

1. Positionnement : La position de l'élément déplaçable est définie à l'aide des propriétés CSS (gauche et haut). La position est définie sur fixe, ce qui lui permet d'être placé n'importe où dans la fenêtre.

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!