Wir werden ein Beispiel zeigen, wie Sie Bilder durch eine Webseite bewegen und in einem Div erfassen. Dazu werden wir die JQuery-Benutzeroberfläche verwenden . y droppable . Wir werden Drag & Drop verwenden . Die minimalen Stile werden verwendet. In diesem Tutorial wird keine nette Umgebung angestrebt, in der Sie es ausprobieren können, wenn Sie die Funktionsweise der kommentierten Funktionen nicht sehen. Der Code ist nicht sehr kompliziert.
In dem Beispiel haben wir ein Paar Bilder und ein Div mit einem Rand. Das Ziel ist es, jedes Bild in das Div zu verschieben, und dass es es fängt, werden wir die Codes sehen, die mit dem HTML beginnen.
HTML-Code
Sie werden es zu schätzen wissen, dass der HTML-Code kurz ist, genau das, was erforderlich ist, hier ist nicht der wichtige Teil des Tutorials.
<! DOCTYPE html> <html> <head> <script src = "https://code.jquery.com/jquery-1.12.4.js"> </ script> <script src = "https://code.jquery.com/ui/1.12.0/jquery-ui.js"> </ script> <script src = "script.js"> </ script> <link rel = "stylesheet" href = "styles.css"> <title> Ziehen Sie </ title> </ head> <body> <img class = "moverImagen" src = "solvetic.png" alt = ""> <img class = "moverImagen" src = "solvetic.png" alt = ""> <div id = "box"> </ div> </ body> </ html>
Im Kopfteil importieren wir den erforderlichen Stil, das von uns erstellte Skript und das JQuery-UI-Skript. Fügen Sie im Hauptteil einfach 2 Bilder und ein Div hinzu, das Div hat eine ID und Bilder mit einer Klasse, damit wir sie in unserem Skript verarbeiten können.
CSS Code
Wie eingangs erwähnt, haben die Stile keine Priorität, sondern nur die für diese Aufgabe erforderlichen.
#cuadro { Breite: 270px; Mindesthöhe: 60px; Rand: Auto; Rand: 1px festes Schwarzes; Polsterung: 5px; } fallen gelassen Position: statisch! wichtig; }
Dem div wird ein Rand hinzugefügt und zentriert, damit wir sehen können, wann das Bild aufgenommen wird. Die gelöschte Klasse wird statisch gemacht, dieser Teil ist der wichtigste, da diese Klasse dem Bild hinzugefügt wird, wenn es vom div abgefangen wird.
JQuery-Code
Lassen Sie uns den Code unten einfügen und ihn dann erklären.
$ (document) .ready (function () { $ (". moverImagen"). draggable (); $ ("#box"). droppable ({ drop: function (event, ui) { ui.draggable.addClass ("fallen gelassen"); $ (this) .append (ui.draggable); } }); })
Wir veranlassen die Klasse , das ziehbare Bild zu verschieben. Dies ist die Klasse, die unseren Bildern im HTML-Code hinzugefügt wurde. Diese Aufgabe erlaubt es bereits, unsere Bilder um die Seite zu bewegen oder zu ziehen, aber nur das, mit dem Code, der noch nicht “erfasst” wurde. Dazu verwenden wir droppable in der div mit id Box , innerhalb von droppable stellen wir sicher, dass das in der div befindliche Bild von der gelöschten Klasse hinzugefügt wird (merken Sie sich das CSS, ohne die statische Position würde es nicht gut funktionieren) und dies wird später als Inhalt der div hinzugefügt Hierfür verwenden wir append.
Lassen Sie uns nun das Beispiel ausprobieren. In der folgenden Abbildung sehen wir, wie die Seite gestartet wird:
Wenn Sie ein Bild verschieben, sieht es folgendermaßen aus:
Und schließlich, wenn wir die 2 Bilder in der Div haben, wird die “Seite” so aussehen:
Es ist zu beachten, dass das Erscheinungsbild je nach Größe des Fensters geringfügig variiert. Bisher ist das Tutorial angekommen, jetzt können Sie das Beispiel üben und komplizieren, so oft Sie möchten.