So ziehen und greifen Sie Bilder mit der JQuery-Benutzeroberfläche

Wir zeigen ein Beispiel für So verschieben Sie Bilder auf einer Webseite und fangen sie ein in einem div verwenden wir dafür die JQuery UI. Wir werden verwenden ziehbar Ja abwerfbar. Es werden die minimalen Stile verwendet, dieses Tutorial zielt nicht darauf ab, eine schöne Umgebung zu haben, um es zu testen, sondern um zu sehen, wie die kommentierten Funktionen funktionieren. Der Code hat keine größeren Komplikationen.

Im Beispiel haben wir ein paar Bilder und ein div mit einem Rand, das Ziel ist es, jedes Bild in das div zu verschieben und es zu fangen, wir werden die Codes sehen, die mit dem HTML beginnen.

HTML Quelltext

Sie werden es zu schätzen wissen, dass der HTML-Code kurz ist, nur das Notwendige, der wichtige Teil des Tutorials ist hier nicht zu finden.

 Ziehen  

Im Kopfbereich importieren wir den erforderlichen Stil, das von uns erstellte Skript und die JQuery-UI-Skripte. Fügen Sie im Body einfach 2 Bilder und ein div hinzu, das div hat eine ID und die Bilder eine Klasse, damit wir sie in unserem Skript verarbeiten können.

CSS-Code

Wie eingangs gesagt, stehen Stile nicht im Vordergrund, es werden nur die für diese Aufgabe notwendigen verwendet.

 #frame {Breite: 270px; Mindesthöhe: 60px; Rand: automatisch; Rand: 1px einfarbig schwarz; Polsterung: 5px; } .dropped {position: statisch! wichtig; } 

Dem div wird ein Rahmen hinzugefügt und es wird 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

Wir werden den Code unten einfügen, um ihn später zu erklären.

 $ (document) .ready (function () {$ (". moveImage"). draggable (); $ ("#box"). droppable ({drop: function (event, ui) {ui.draggable.addClass (" fallengelassen "); $ (this) .append (ui.draggable);}});})

Wir machen die Klasse Bild verschieben draggable, das ist die Klasse, die unseren Bildern im HTML hinzugefügt wird. Diese Aufgabe ermöglicht es uns bereits, unsere Bilder auf der Seite zu verschieben oder zu ziehen, aber nur das, mit diesem Code würde es noch nicht "eingefangen". Dazu verwenden wir droppable im div mit id Bild, innerhalb von droppable lassen wir das im div befindliche Bild zur gelöschten Klasse hinzufügen (denken Sie an das CSS, ohne die statische Position würde es nicht gut funktionieren) und später wird dies als Inhalt des div hinzugefügt, dafür verwenden wir append.

Jetzt testen wir das Beispiel, in der folgenden Abbildung sehen wir, wie die Seite beginnt:

Das Verschieben eines Bildes sieht so aus:

Und schließlich, wenn wir die 2 Bilder im div haben, sieht die "Seite" so aus:

Es ist zu beachten, dass das Erscheinungsbild je nach Größe des Fensters leicht variiert. So weit ist das Tutorial gekommen, jetzt können Sie das Beispiel so viel üben und komplizieren, wie Sie möchten.

NotizWenn Sie mehr über die JQuery UI erfahren möchten, besuchen Sie deren Seite. Sie werden weitere Möglichkeiten finden und Beispiele sehen.