Drag & Drop mit der jQuery-Benutzeroberfläche

Bevor wir mit einigen praktischen Beispielen beginnen, werfen wir einen Blick auf die Drag-and-Drop-Methoden, die die jQuery-Benutzeroberfläche für uns bietet.
1- Ziehbare Methode ()
Die Draggable-Methode verwaltet die Elemente einer HTML-Seite, die Sie verschieben möchten. Diese Methode kann auf zwei verschiedene Arten verwendet werden:

 • $ (Selektor, Kontext) .draggable (Optionen) • $ (Selektor, Kontext) .draggable ("Aktion", Parameter) 

Sehen wir uns ein Beispiel an:
Zuerst müssen wir die notwendigen Dateien einbinden, ein häufiger Fehler, der gemacht wird, ist, die jQuery UI .js vor der jQuery .js einzubinden. Denken Sie daran, dass jQuery der Kern ist und jQuery UI nur Bibliotheken, Plugins, Widgets sind, die ohne jQuery nicht funktionieren würde funktionieren.

Wir rufen die Methode auf:

 $ (Funktion () {$ ("#ziehbar") .ziehbar ();}); 

Und wir verknüpfen es mit dem Selektor, der das div mit ihm sein wird.

Zieh mich herum

Hier ist der komplette Quellcode:

 jQuery UI Draggable - Standardfunktionalität
Zieh mich herum

2- Dropable () Methode
Die droppable-Methode verwaltet die Elemente einer HTML-Seite, die Sie in einen Bereich fallen lassen möchten. Wie die ziehbare Methode kann sie auf zwei verschiedene Arten verwendet werden:

 • $ (Selektor, Kontext) .droppable (Optionen) • $ (Selektor, Kontext) .droppable ("Aktion", Parameter) 

Schauen wir uns dazu ein Beispiel an:
Wir binden die Dateien ein, wir fügen die Stile hinzu, wir rufen die Methoden auf (hier verwenden wir gleichermaßen die Draggable-Methode), gefolgt von der Droppable-Methode. Hier der Quellcode:

 jQuery UI Droppable - Standardfunktionalität
Zieh mich zu meinem Ziel
Hier abstellen

Und das wäre unsere Ausgabe im Browser:

Was wäre, wenn wir beide Konzepte in einem komplizierteren Beispiel zusammenfassen, etwa einem Einkaufswagen? Mal sehen:
Zuerst binden wir unsere Dateien ein:

Wir fügen unserem Warenkorb einige Stile hinzu:

Wir werden auch die Accordion()-Methode aus der jQuery-UI-Bibliothek verwenden, um unseren Warenkorb attraktiver zu machen, wir rufen unsere Methoden auf und verknüpfen sie mit den Selektoren, in diesem Fall werden wir die gesamte Funktionalität der ziehbaren Methode auf eine Liste erweitern:

Und so würde unser Warenkorb aussehen:

Damit Sie es testen können, hier der vollständige Quellcode:

 jQuery UI Droppable - Einkaufswagen-Demo
T-Shirts

Lolcat-Hemd
Cheezeburger Hemd
Buckit-Shirt


Taschen

Zebra gestreift
Schwarzes Leder
Alligatorleder


Geräte

iPhone
iPod
iPad


Fügen Sie hier Ihre Artikel hinzu

Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben