บทช่วยสอน jQuery EasyUI ลาก - การลากและวางเพื่อสร้างรถเข็นช็อปปิ้ง ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ดาวน์โหลดตัวอย่าง jQuery EasyUI,
หากคุณสามารถผ่านการใช้งานเว็บของคุณง่ายที่จะใช้การลากและวางคุณรู้ว่าบางสิ่งที่พิเศษ โดย jQuery EasyUI เราก็สามารถลากและวางฟังก์ชั่นในการใช้งานเว็บ
ในการกวดวิชานี้เราจะแสดงให้คุณเห็นวิธีการสร้างผู้ใช้ลากและวางรายการที่จะช่วยให้ผู้ใช้ที่จะซื้อหน้ารถเข็นช้อปปิ้ง ตะกร้าช้อปปิ้งของสินค้าและราคาจะมีการปรับปรุง
<ul class = "ผลิตภัณฑ์"> <li> <a href="#" class="item"> <img src = "images / shirt1.gif" /> <div> บอลลูน <p> </ p> <p> ราคา: $ 25 </ p> </ div> </a> </ li> <li> <a href="#" class="item"> <img src = "images / shirt2.gif" /> <div> ความรู้สึก <p> </ p> <p> ราคา: $ 25 </ p> </ div> </a> </ li> <! - สินค้าอื่น ๆ -> </ ul>
ที่คุณสามารถดูในรหัสข้างต้นเราเพิ่มที่มี <ul> จำนวนองค์ประกอบ <li> องค์ประกอบในการแสดงสินค้า สินค้าทั้งหมดมีชื่อและคุณสมบัติราคาซึ่งจะรวมอยู่ใน <p> องค์ประกอบ
<ระดับ Div = "รถเข็น"> <h1> รถเข็น </ h1> <table id = "cartcontent" style = "width: 300px; ความสูง: อัตโนมัติ;"> <thead> <tr> <Th ฟิลด์ = "ชื่อ" width = 140> ชื่อ </ TH> <Th ฟิลด์ = "ปริมาณ" width = 60 align = "สิทธิ"> จำนวน </ TH> <Th ฟิลด์ = "ราคา" width = 60 align = "สิทธิ"> ราคา </ TH> </ tr> </ thead> </ table> <p class = "รวม"> ทั้งหมด: 0 $ </ p> <h2> วางที่นี่เพื่อเพิ่มในรถเข็น </ h2> </ div>
เราใช้ตารางข้อมูล (DataGrid) เพื่อแสดงรายการในตะกร้าช้อปปิ้ง
$ ( '. รายการ'). ลาก ({ ย้อนกลับ: จริง พร็อกซี่: 'โคลน' onStartDrag: ฟังก์ชั่น () { . $ (นี้) .draggable ( 'ตัวเลือก') เคอร์เซอร์ = 'ไม่ได้รับอนุญาต'; . $ (นี้) .draggable ( 'พร็อกซี่) CSS (' ดัชนี z ', 10); } onStopDrag: ฟังก์ชั่น () { . $ (นี้) .draggable ( 'ตัวเลือก') เคอร์เซอร์ = 'ย้าย'; } });
โปรดทราบว่าเราค่าแอตทริบิวต์ที่ลากจาก 'พร็อกซี' ถูกตั้งค่าเป็น 'โคลนนิ่ง' ดังนั้นองค์ประกอบลากที่ผลิตโดยการโคลน
$ ( '. รถเข็น'). droppable ({ OnDragEnter: ฟังก์ชั่น (E แหล่งที่มา) { . $ (ที่มา) .draggable ( 'ตัวเลือก') เคอร์เซอร์ = 'รถยนต์'; } onDragLeave: ฟังก์ชั่น (E แหล่งที่มา) { . $ (ที่มา) .draggable ( 'ตัวเลือก') เคอร์เซอร์ = 'ไม่ได้รับอนุญาต'; } onDrop: ฟังก์ชั่น (E แหล่งที่มา) { . ชื่อตัวแปร = $ (ต้นฉบับ) ประจำวันหา ( 'P: EQ (0)') HTML (); . วาราคา = $ (ต้นฉบับ) ประจำวันหา ( 'P: EQ (1)') HTML (); addProduct (ชื่อ parseFloat (price.split ( '$') [1])); } }); var ข้อมูล = { "รวม": 0, "แถว" []}; var TOTALCOST = 0; ฟังก์ชั่น addProduct (ชื่อราคา) { ฟังก์ชั่น Add () { สำหรับ (var i = 0; i <data.total; i ++) { แถว var = data.rows [I]; ถ้า (row.name == ชื่อ) { row.quantity + 1 =; กลับ; } } data.total + 1 =; data.rows.push ({ ชื่อ: ชื่อ ปริมาณ: 1, ราคา: ราคาขาย }); } เพิ่ม (); TOTALCOST + = ราคา; . $ ( '# Cartcontent') DataGrid ( 'LoadData' ข้อมูล); $ ( 'Div.cart .total') HTML ( 'รวมทั้งสิ้น: $' + TOTALCOST) ;. }
เมื่อใดก็ตามที่การวางตำแหน่งของสินค้าที่เราได้รับชื่อและสินค้าโภคภัณฑ์ราคาครั้งแรกและจากนั้นเรียกใช้ฟังก์ชัน 'addProduct' เพื่ออัพเดตตะกร้าช้อปปิ้ง