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:
|
<<: Die Einhandregel von WEB 2.0
>>: Verwendung und Optimierung der MySQL COUNT-Funktion
Fallstricke bei der Projektimplementierung Beim B...
CSS-Schrifteigenschaften definieren die Schriftfa...
Vor einiger Zeit habe ich einen Blogbeitrag mit d...
Inhaltsverzeichnis beschreiben erreichen Die Proj...
Bei der Designarbeit höre ich oft, dass an der Übe...
Vorwort Wie wir alle wissen, gehört HTML5 dem Wor...
Vorwort Der SQL-Modus wirkt sich auf die von MySQ...
Inhaltsverzeichnis 1. Digitaler Betrieb (1) Gener...
Inhaltsverzeichnis 1. Projektanforderungen Zweite...
Die MySQL Master-Slave-Replikation ermöglicht die...
Was ist MySQL Multi-Instance Einfach ausgedrückt ...
Die Ausführungseffizienz der MySQL-Datenbank hat ...
In diesem Artikel wird der spezifische JS-Code zu...
Vorlage 1: anmelden.vue <Vorlage> <p Kla...
Installieren Sie Jenkins über Yum 1. Installation...