Was für ein Widerstand...

Warum Elemente ziehbar machen?
Ziehbare Elemente können die Benutzerfreundlichkeit in verschiedenen Anwendungen erheblich verbessern, wie zum Beispiel:

1. Dashboards: Benutzer können Widgets nach ihren Wünschen neu anordnen.
2. Bildergalerien: Benutzer können Bilder für ein besseres Layout neu positionieren.
3. Aufgabentafeln: Benutzer können Aufgaben per Drag-and-Drop zwischen verschiedenen Spalten verschieben.

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

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

2. Mausereignisse:

• Mousedown: Wenn der Benutzer die Maustaste auf den Griff drückt, beginnen wir mit der Bewegungsverfolgung.
• mousemove: Wenn der Benutzer die Maus bewegt, während er die Taste gedrückt hält, aktualisieren wir die Position des ziehbaren Elements basierend auf der aktuellen Mausposition.
• Mouseup: Wenn der Benutzer die Maustaste loslässt, hören wir auf, Bewegungen zu verfolgen.

1. Positionierung: Die Position des ziehbaren Elements wird mithilfe von CSS-Eigenschaften (links und oben) festgelegt. Die Position ist auf „Fest“ eingestellt, sodass sie an einer beliebigen Stelle im Ansichtsfenster platziert werden kann.

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!