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

Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

Dieser Artikel stellt einige Aspekte von HTML-Tag...

Lösung für den von Mysql systemctl start mysqld gemeldeten Fehler

Fehlermeldung: Der Job für mysqld.service ist feh...

Detaillierte Erklärung zur Verwendung von Eslint in Vue

Inhaltsverzeichnis 1. Beschreibung 2. Laden Sie d...

Methode zur Erstellung von Vue-Scaffolding-Lernprojekten

1. Was ist Scaffolding? 1. Vue-CLI Vue CLI ist ei...

Mehrere Möglichkeiten zum Verbinden von Tabellen in MySQL

Die Verbindungsmethode in der MySQL-Tabelle ist e...

So definieren Sie Datenbeispiele in Vue

Vorwort Im Entwicklungsprozess ist das Definieren...

So kompilieren Sie Nginx neu und fügen Module hinzu

Beim Kompilieren und Installieren von Nginx werde...

Detailliertes Tutorial zur Tomcat-Installation und -Bereitstellung in Windows 10

Inhaltsverzeichnis 1 Konfiguration der Java-Umgeb...

Detaillierte Erklärung des JSON-Dateischreibformats

Inhaltsverzeichnis Was ist JSON Warum diese Techn...