jQuery EasyUI drag - drag dan drop untuk membuat keranjang belanja
Jika Anda dapat melalui aplikasi Web Anda mudah untuk menerapkan drag dan drop, Anda tahu sesuatu yang istimewa. Dengan jQuery EasyUI, kita hanya dapat drag dan drop fungsionalitas dalam aplikasi Web.
Dalam tutorial ini, kami akan menunjukkan cara untuk membuat user drag dan drop item untuk memungkinkan pengguna untuk membeli halaman keranjang belanja. keranjang belanja barang dan harga akan diperbarui.
Barang yang ditampilkan pada halaman
<Ul class = "produk"> <Li> <a href="#" class="item"> <Img src = "images / shirt1.gif" /> <Div> <P> Balon </ p> <P> Harga: $ 25 </ p> </ Div> </a> </ Li> <Li> <a href="#" class="item"> <Img src = "images / shirt2.gif" /> <Div> <P> Feeling </ p> <P> Harga: $ 25 </ p> </ Div> </a> </ Li> <! - Produk lain -> </ Ul>
Seperti yang Anda lihat dalam kode di atas, kita menambahkan mengandung <ul> jumlah elemen <li> elemen untuk menampilkan barang dagangan. Semua barang dagangan memiliki nama dan sifat harga, yang termasuk dalam <p> elemen.
Buat Daftar Belanja
<Class Div = "keranjang"> <H1> Keranjang Belanja </ h1> <Table id = "cartcontent" style = "width: 300px; height: auto;"> <Thead> <Tr> <Th field = "nama" width = 140> Nama </ th> <Th field = "kuantitas" width = 60 align = "right"> Quantity </ th> <Th field = "harga" width = 60 align = "right"> Harga </ th> </ Tr> </ Thead> </ Table> <P class = "total"> Total: $ 0 </ p> <H2> Gugurkan sini untuk menambahkan ke troli </ h2> </ Div>
Kami menggunakan data grid (datagrid) untuk menampilkan item dalam keranjang belanja.
Tarik clone barang
$ ( '. Item'). Draggable ({ kembali: benar, Proxy: 'clone', onStartDrag: function () { . $ (Ini) .draggable ( 'Pilihan') kursor = 'tidak-diperbolehkan'; . $ (Ini) .draggable ( 'proxy') css ( 'z-index', 10); }, onStopDrag: function () { . $ (Ini) .draggable ( 'Pilihan') kursor = 'bergerak'; } });
Harap dicatat bahwa kami diseret nilai atribut dari 'proxy' diatur ke 'clone', sehingga elemen tarik yang dihasilkan oleh kloning.
Tempatkan pilih item ke keranjang belanja
$ ( '. Cart'). Droppable ({ onDragEnter: function (e, sumber) { . $ (Sumber) .draggable ( 'Pilihan') kursor = 'auto'; }, onDragLeave: function (e, sumber) { . $ (Sumber) .draggable ( 'Pilihan') kursor = 'tidak-diperbolehkan'; }, onDrop: function (e, sumber) { . Var nama = $ (sumber) .find ( 'p: eq (0)') html (); . Var harga = $ (sumber) .find ( 'p: eq (1)') html (); addProduct (nama, parseFloat (price.split ( '$') [1])); } }); var data = { "total": 0, "baris": []}; var totalCost = 0; Fungsi addProduct (nama, harga) { Fungsi add () { for (var i = 0; i <data.total; i ++) { baris var = data.rows [i]; jika (row.name == nama) { row.quantity + = 1; kembali; } } data.total + = 1; data.rows.push ({ Nama: Nama, kuantitas: 1, Harga: Harga }); } tambahkan (); totalCost + = harga; . $ ( '# Cartcontent') datagrid ( 'LoadData', data); $ ( 'Div.cart .total') html ( 'Total: $' + totalCost) ;. }
Setiap kali penempatan barang, kami mendapatkan nama dan harga komoditas pertama, dan kemudian memanggil fungsi 'addProduct' untuk memperbarui keranjang belanja.