Das beste jQuery EasyUI Drag - Drag & Drop einen Einkaufswagen zu schaffen-Tutorial im Jahr 2024. In diesem Tutorial können Sie Download von jQuery EasyUI Beispiele, lernen
Wenn Sie Ihren Web-Anwendungen einfach durch können per Drag-and-Drop zu implementieren, wissen Sie etwas Besonderes. Mit jQuery EasyUI können wir einfach ziehen und Funktionalität in Web-Anwendungen fallen.
In diesem Tutorial zeigen wir Ihnen, wie Sie einen Benutzer ziehen zu erstellen und Elemente fallen Benutzer zu ermöglichen, die Warenkorb-Seite zu kaufen. Warenkorb von Waren und Preise werden aktualisiert.
<Ul class = "Produkte"> <Li> <a href="#" class="item"> <Img src = "images / shirt1.gif" /> <Div> <P> Ballon </ p> <P> Preis: $ 25 </ p> </ Div> </a> </ Li> <Li> <a href="#" class="item"> <Img src = "images / shirt2.gif" /> <Div> <P> Gefühl </ p> <P> Preis: $ 25 </ p> </ Div> </a> </ Li> <! - Mehr Produkte -> </ Ul>
Wie Sie im obigen Code sehen können, wir mit <ul> Elementnummer <li> Element hinzufügen Waren angezeigt werden soll. Alle Waren, hat einen Namen und Preis Eigenschaften, die in der <p> Element enthalten ist.
<Div class = "Warenkorb"> <H1> Warenkorb </ h1> <Table id = "cartcontent" style = "width: 300px; height: auto;"> <Thead> <Tr> <Th Feld = "name" width = 140> Name </ th> <Th field = "Quantität" width = 60 align = "right"> Menge </ th> <Th field = "Preis" width = 60 align = "right"> Preis </ th> </ Tr> </ Thead> </ Table> <P class = "total"> Total: $ 0 </ p> <H2> Hier ablegen, den Warenkorb </ h2> hinzufügen </ Div>
Wir verwenden das Datenraster (Datagrid), um die Artikel im Warenkorb angezeigt werden soll.
$ ( '. Item'). Ziehbare ({ zufällt: true, Proxy: "Klon", OnStartDrag: function () { . $ (This) .draggable ( 'Optionen') Cursor = 'nicht-erlaubt "; . $ (This) .draggable ( "Proxy") css ( 'z-index', 10); }, onStopDrag: function () { . $ (Diese) .draggable ( 'Optionen') Cursor = 'move'; } });
Bitte beachten Sie, dass wir Attributwert aus dem "Proxy" ziehbar ist auf "Klon", so das Schleppelement durch Klonen erzeugt.
$ ( '. Wagen'). Dropfähig ({ OnDragEnter: function (e, Quelle) { . $ (Quelle) .draggable ( 'Optionen') Cursor = 'auto'; }, OnDragLeave: function (e, Quelle) { . $ (Quelle) .draggable ( 'Optionen') Cursor = 'nicht-erlaubt "; }, onDrop: function (e, Quelle) { . Var name = $ (Quelle) .find ( 'p: eq (0)') html (); . Var Preis = $ (Quelle) .find ( 'p: eq (1)') html (); addProduct (Name, parseFloat (price.split ( '$') [1])); } }); var data = { "total": 0, "Zeilen": []}; var Totalcost = 0; Funktion addProduct (Name, Preis) { Funktion add () { for (var i = 0; i <data.total; i ++) { var row = data.rows [i]; if (row.name == name) { row.quantity + = 1; Rückkehr; } } data.total + = 1; data.rows.push ({ Name: Name, Menge: 1, Preis: Preis }); } add (); Totalcost + = Preis; . $ ( '# Cartcontent') Datagrid ( "loaddata", Daten); $ ( 'Div.cart .total') html ( 'Total: $' + Totalcost) ;. }
Jedes Mal, wenn die Platzierung von Waren, erhalten wir die ersten Namen und Rohstoffpreise, und rufen Sie dann 'addProduct' Funktion, um den Warenkorb zu aktualisieren.