js objektorientierte Methode zum Erzielen eines Drag-Effekts

In diesem Artikel wird der spezifische Code zur Implementierung von Drag & Drop in objektorientierter js-Methode zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Das Implementierungsprinzip der Drag-Funktion: (direkt wegnehmen!)

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Dokument</title>
  <Stil>
    #Kasten {
      Position: absolut;
      links: 100px;
      oben: 100px;
      Breite: 100px;
      Höhe: 100px;
      Hintergrund: rot;
    }

    #box2 {
      Position: absolut;
      links: 200px;
      oben: 200px;
      Breite: 100px;
      Höhe: 100px;
      Hintergrund: grün;
    }
  </Stil>
</Kopf>

<Text>
  <div id="box">Text</div>
  <div id="box2">Text</div>
</body>
<Skript>
  Klasse Ziehen {
    startMouse = {};
    startEl = {};
    #el = null;
    Konstruktor(el, option) {
      dies.#el = el;
      diese.option = Option;
      dies.start();
    }
    Start() {
      lass bewegen = (e) => {
        dies.bewegen(e)
      }
      dies.#el.addEventListener('mousedown', (e) => {
        dies.startMouse = {
          x: e.clientX,
          y: e.clientY,
        }
        dies.ondragstart und dies.ondragstart(e)
        dies.startEl = dies.getOffset();
        document.addEventListener('mousemove', bewegen);
        document.addEventListener('mouseup', (e) => {
          document.removeEventListener('mousemove', verschieben);
          dies.ende(e);
        }, {
          einmal: wahr
        })
        e.preventDefault();

      })
    }
    bewegen(e) {
      lass jetztMouse = {
        x: e.clientX,
        y: e.clientY,
      }
      lass disMouse = {
        x: jetztMouse.x - diese.startMouse.x,
        y: jetztMaus.y - diese.startMaus.y
      }
      dies.ondrag und dies.ondrag(e)
      this.setOffset(disMouse)
    }
    Ende(e) {
      dies.ondragend und dies.ondragend(e)
    }
    getOffset() {
      zurückkehren {
        x: parseFloat(getComputedStyle(this.#el)["links"]),
        y: parseFloat(getComputedStyle(this.#el)["oben"])
      }
    }
    setzeOffset(dis) {
      dies.#el.style.left = dies.startEl.x + dis.x + 'px'
      dies.#el.style.top = dies.startEl.y + dis.y + 'px'
    }
  }
  let box = document.querySelector("#box");
  let box2 = document.querySelector("#box2");
  lass d = neue Drag(Box);
  sei d2 = neues Drag(box2);
  lass clonex = null;
  d2.ondragstart = (e) => {
    clonex = box2.cloneNode(true);
    Dokument.Body.AnhängenUntergeordnetesElement(Clonex)
    box2.style.opacity = 0,5
  }
  d2.ondragend = () => {
    Dokument.Body.RemoveChild(Clonex);
    box2.style.opacity = 1
  }
</Skript>

</html>

Der endgültige Effekt (der gezogene Block ist der grüne Block)

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Werfen wir einen Blick auf die objektorientierte Programmierung in Javascript
Detaillierte Erläuterung der objektorientierten Praxis von JavaScript: Kapselung und Ziehen von Objekten
Detaillierte Erklärung der objektorientierten Programmierung in JavaScript [Klassenerstellung, Instanzobjekte, Konstruktoren, Prototypen usw.]
Zusammenfassung der grundlegenden Kenntnisse und Konzepte der objektorientierten JavaScript-Architektur
Detaillierte Beispiele der sieben Grundprinzipien der objektorientierten JavaScript
Kennen Sie objektorientiertes JavaScript?

<<: Lösung für dieselbe IP nach dem Klonen der virtuellen Ubuntu 18-Maschine

>>: So ändern Sie das MySQL-Passwort auf dem XAMPP-Server (mit Bildern)