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' เพื่ออัพเดตตะกร้าช้อปปิ้ง

ดาวน์โหลดตัวอย่าง jQuery EasyUI

jeasyui-dd-shopping.zip