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

So richten Sie den Start einer JAR-Anwendung unter CentOS7 ein

Fallstricke bei der Projektimplementierung Beim B...

So finden Sie Informationen zu nicht festgeschriebenen Transaktionen in MySQL

Vor einiger Zeit habe ich einen Blogbeitrag mit d...

So implementieren Sie die Anpassung des Echats-Diagramms an große Bildschirme

Inhaltsverzeichnis beschreiben erreichen Die Proj...

Eine ausführliche Diskussion zur Detailanalyse im Webdesign

Bei der Designarbeit höre ich oft, dass an der Übe...

HTML 5.1 lernen: 14 neue Features und Anwendungsbeispiele

Vorwort Wie wir alle wissen, gehört HTML5 dem Wor...

Zusammenfassung der Merkmale des SQL-Modus in MySQL

Vorwort Der SQL-Modus wirkt sich auf die von MySQ...

So konfigurieren Sie die MySQL Master-Slave-Replikation unter Windows

Die MySQL Master-Slave-Replikation ermöglicht die...

MySQL Multi-Instance-Bereitstellungs- und Installationshandbuch unter Linux

Was ist MySQL Multi-Instance Einfach ausgedrückt ...

JS implementiert einfachen Kalendereffekt

In diesem Artikel wird der spezifische JS-Code zu...

Detaillierte Erläuterung des Installationsprozesses von Jenkins auf CentOS 7

Installieren Sie Jenkins über Yum 1. Installation...