Vue implementiert die Drag & Drop-Funktion für Bilder

Vue implementiert die Drag & Drop-Funktion für Bilder

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Realisierung der Drag & Drop-Funktion für Bilder zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

1. Hauptsächlich beteiligtes Elementwissen, schematische Darstellung:

2. js-Codeteil:

Anweisungen: {
    ziehen: {
      // Definition der Anweisung bind: function(el) {
        // Aktuelles Element abrufen let oDiv = el;
        oDiv.onmousedown = (e) => {
          // Position der Maus relativ zum Element berechnen let disX = e.clientX - oDiv.offsetLeft;
          let disY = e.clientY - oDiv.offsetTop;

          document.onmousemove = (e) => {
            //Subtrahieren Sie die Position der Maus relativ zum Element von der Position der Maus, um die Position des Elements zu erhalten let left = e.clientX - disX;
            let top = e.clientY - disY;

            oDiv.style.left = links + "px";
            oDiv.style.top = oben + 'px';
          };
          document.onmouseup = () => {
            Dokument.onmousemove = null;
            Dokument.onmouseup = null;
          }
        }
      }
    }
    }

3. Verwendung:

<div Klasse="Karte" v-drag id="Karte">
<img src="../assets/logo.png" >
</div>

4. Stilteil (Position muss auf absolut gesetzt sein):

.Karte {
  Position: absolut;
  schweben: links;
  Breite: 200px;
  Höhe: 200px;

}

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:
  • Vue integriert einen Rich-Text-Editor, der das Zoomen und Ziehen von Bildern unterstützt
  • Vue implementiert ein Beispiel für einen Bildvorschau-Effekt (Vergrößern, Verkleinern, Ziehen)
  • Vue implementiert Drag & Drop oder Klicken zum Hochladen von Bildern
  • Vue implementiert das Problem der Bildskalierung
  • Verwenden Sie Vue-Komponenten, um die Drag- und Zoomfunktion von Bildern zu realisieren

<<:  Die Einhandregel von WEB 2.0

>>:  Verwendung und Optimierung der MySQL COUNT-Funktion

Artikel empfehlen

Spezifische Verwendung der MySQL-Vorbereitungsvorverarbeitung

Inhaltsverzeichnis 1. Vorverarbeitung 2. Vorbehan...

Front-End-JavaScript versteht Funktions-Currying gründlich

Inhaltsverzeichnis 1. Was ist Curry 2. Verwendung...

Sehr empfehlenswert! Syntax Sugar in Vue 3.2 einrichten

Inhaltsverzeichnis Vorherige 1. Was ist Setup-Syn...

Schriftreferenzen und Übergangseffekte außerhalb des Systems

Code kopieren Der Code lautet wie folgt: <span...

SQL-Implementierung von LeetCode (177. N-höchstes Gehalt)

[LeetCode] 177.N-höchstes Gehalt Schreiben Sie ei...

Detaillierte Erklärung der MySQL-Partitionstabelle

Vorwort: Partitionierung ist ein Tabellenentwurfs...

Karusselleffekte mit JavaScript implementieren

In diesem Artikel wird der spezifische Code für J...

Reagieren Sie auf den nativen ScrollView-Pulldown-Aktualisierungseffekt

In diesem Artikel wird der spezifische Code des P...

Detaillierte Erklärung zur Verwendung des Arguments-Objekts in JavaScript

Inhaltsverzeichnis Vorwort Grundlegende Konzepte ...

Fallstudie zu JavaScript Anti-Shake

Prinzip Das Prinzip von Anti-Shake ist: Du kannst...

Eine kurze Diskussion über Yahoos 35 Regeln zur Front-End-Optimierung

Zusammenfassung: Ob bei der Arbeit oder im Vorste...