مسج EasyUI السحب - السحب والإسقاط لخلق عربة التسوق

إذا كنت تستطيع من خلال تطبيقات ويب بسيطة لتنفيذ السحب والإسقاط، كما تعلمون شيئا خاصا. بواسطة مسج EasyUI، يمكننا ببساطة سحب وإسقاط وظائف في تطبيقات الويب.

في هذا البرنامج التعليمي، ونحن سوف تظهر لك كيفية إنشاء السحب المستخدم وإسقاط البنود لتمكين المستخدمين من شراء صفحة عربة التسوق. سيتم تحديث سلة التسوق من السلع والأسعار.

السلع المعروضة على الصفحة

	<الطبقة = "منتجات" ماي>
		<لي>
			<a href="#" class="item">
				على <img SRC = "صور / shirt1.gif" />
				<div>
					<P> بالون </ P>
					<P> السعر: $ 25 </ P>
				</ div>
			</A>
		</ لى>
		<لي>
			<a href="#" class="item">
				على <img SRC = "صور / shirt2.gif" />
				<div>
					<P> الشعور </ P>
					<P> السعر: $ 25 </ P>
				</ div>
			</A>
		</ لى>
		<! - منتجات أخرى ->
	</ UL>

كما ترون في رمز أعلاه، نضيف تحتوي على <UL> رقم العنصر <li> وعنصر لعرض البضائع. جميع البضائع التي تحمل اسما وخصائص السعر، والتي يتم تضمينها في العنصر <P>.

إنشاء سلة التسوق

	<فئة الدرجة = "عربة">
		<H1> سلة التسوق </ H1>
		<جدول معرف = "cartcontent" على غرار = "العرض: 300px؛ الطول: السيارات؛">
			<THEAD>
				<tr>
					<ث الحقل = "اسم" العرض = 140> اسم </ تشرين>
					<ث الحقل = "كمية" العرض = 60 محاذاة = "حق"> الكمية </ تشرين>
					<ث الحقل = "سعر" العرض = 60 محاذاة = "حق"> السعر </ تشرين>
				</ tr>
			</ THEAD>
		</ الجدول>
		<P الطبقة = "المجموع"> إجمالي: 0 $ </ P>
		<H2> إسقاط هنا لإضافة إلى السلة </ H2>
	</ div>

نحن نستخدم شبكة البيانات (datagrid) لعرض العناصر في سلة التسوق.

اسحب نسخة من البضائع

	$ ( 'البند'). القابل للسحب ({
		العودة: صحيح،
		وكيل: "استنساخ"،
		onStartDrag: وظيفة () {
			. $ (هذا) .draggable ( 'خيارات') المؤشر = 'لا يسمح-؛
			. $ (هذا) .draggable ( 'الوكيل') المغلق ( 'ض مؤشر'، 10)؛
		}،
		onStopDrag: وظيفة () {
			. $ (هذا) .draggable المؤشر ( 'خيارات') = 'خطوة'؛
		}
	})؛

يرجى ملاحظة أننا القابل للسحب قيمة السمة من 'الوكيل' ومجموعة 'استنساخ'، وبالتالي فإن عنصر السحب التي تنتجها الاستنساخ.

وضع اختيار العناصر إلى عربة التسوق

	$ ( '. العربة'). Droppable ({
		onDragEnter: وظيفة (ه، المصدر) {
			. $ (المصدر) .draggable ( 'خيارات') المؤشر = 'السيارات'؛
		}،
		onDragLeave: وظيفة (ه، المصدر) {
			. $ (المصدر) .draggable ( 'خيارات') المؤشر = 'لا يسمح-؛
		}،
		onDrop: وظيفة (ه، المصدر) {
			. فار اسم = $ (المصدر) .find ( 'ص: مكافئ (0)') أتش تي أم أل ()؛
			. فار السعر = $ (المصدر) .find ( 'ص: مكافئ (1)') أتش تي أم أل ()؛
			addProduct (الاسم، parseFloat (price.split ( '$') [1]))؛
		}
	})؛
	فار البيانات = { "المجموع": 0 "صفوف": []}؛
	فار TOTALCOST = 0؛
	addProduct وظيفة (الاسم، السعر) {
		إضافة وظيفة () {
			ل(فار ط = 0؛ ط <data.total، وأنا ++) {
				الصف فار = data.rows [أنا].
				إذا (row.name == اسم) {
					row.quantity + = 1؛
					العودة؛
				}
			}
			data.total + = 1؛
			data.rows.push ({
				اسم: اسم،
				الكمية: 1،
				السعر: سعر
			})؛
		}
		إضافة ()؛
		TOTALCOST + = سعر.
		. $ ( '# Cartcontent') datagrid ( 'loadData، البيانات)؛
		$ ( 'Div.cart .total') أتش تي أم أل (الإجمالي: $ '+ TOTALCOST) ؛.
	}	

كلما وضع البضائع، وحصلنا على أول الاسعار اسم والسلع، ومن ثم استدعاء "addProduct 'وظيفة لتحديث سلة التسوق.

تحميل أمثلة مسج EasyUI

jeasyui-dd-shopping.zip