jQuery를 EasyUI 드래그 - 드래그 앤 드롭은 쇼핑 카트를 만드는 방법

이 드래그 앤 드롭을 구현하는 간단한 웹 응용 프로그램을 통해 할 수 있다면, 당신은 특별한 무언가를 알고있다. jQuery를 EasyUI, 우리는 단순히 드래그 할 수 있습니다 및 웹 응용 프로그램의 기능을 놓습니다.

이 튜토리얼에서, 우리는 어떻게 사용자가 드래그를 작성하고 장바구니 페이지를 구입하는 사용자를 활성화하는 항목을 삭제하는 방법에 대해 알아 보겠습니다. 제품 및 가격의 쇼핑 바구니가 업데이트됩니다.

상품 페이지에 표시

	<UL 클래스 = "제품">
		<리>
			<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> 요소 번호 <리> 요소를 추가합니다. 모든 상품은 <P> 요소에 포함 된 이름과 가격 특성을 가지고 있습니다.

쇼핑 카트 만들기

	<사업부 클래스 = "장바구니">
		<H1> 장바구니 </ H1>
		<표 아이디 = "cartcontent"스타일 = "너비 : 300 픽셀, 높이 : 자동;">
			<THEAD>
				<TR>
					<목 필드 = "이름"폭 = 140> 이름 </ 일>
					<제 /> <목 필드 = "양"폭 = 60 정렬 = "오른쪽"> 수량
					<목 필드 = "가격"폭 = 60 정렬 = "오른쪽"> 가격 </ 일>
				</ TR>
			</ THEAD>
		</ 테이블>
		<P 클래스 = "총"> 총 : $, 0 </ P>
		<H2> 장바구니에 추가하려면 여기를 드롭 </ H2>
	</ DIV>

우리는 쇼핑 바구니에 항목을 표시 할 데이터 그리드 (데이터 그리드)를 사용합니다.

상품의 복제를 드래그

	$ ( '. 항목'). 드래그 가능한 ({
		복귀 : 사실,
		프록시 : '클론'
		onStartDrag : 함수 () {
			. $ (이) .draggable ( '옵션') 커서 '는-수 없습니다';
			. $ (이) .draggable ( '프록시') CSS ( 'Z- 인덱스', 10);
		},
		onStopDrag : 함수 () {
			. = '이동'$ (이) .draggable ( '옵션') 커서;
		}
	});

우리가 드래그 '복제'로 설정되어있는 '프록시', 그래서 복제에 의해 생성 된 드래그 요소에서 속성 값을 양해 바랍니다.

쇼핑 카트에 선택 항목을 배치

	$ ( '. 쇼핑 카트'). 낙하 할 ({
		onDragEnter : 기능 (즉, 소스) {
			. $ (소스) .draggable ( '옵션') 커서 = '자동';
		},
		onDragLeave : 기능 (즉, 소스) {
			. $ (소스) .draggable ( '옵션') 커서 = '- 할 수 없습니다';
		},
		onDrop : 기능 (즉, 소스) {
			. 바르 이름 = $ (소스) .find ( 'P : EQ (0)') HTML ();
			. 바르 가격 = $ (소스) .find ( 'P : EQ (1)') HTML ();
			addProduct (이름,에서는 parseFloat (price.split ( '$') [1]));
		}
	});
	VAR 데이터 = { "총"0 "행": []};
	var에 TOTALCOST = 0;
	함수 addProduct (이름, 가격) {
		기능 추가 () {
			용 (VAR I = 0; i가 data.total <; 내가 ++) {
				var에 행 = data.rows [I]
				경우 (row.name == 이름) {
					row.quantity + = 1;
					반환;
				}
			}
			data.total + = 1;
			data.rows.push ({
				이름 : 이름,
				수량 : 1,
				가격 : 가격
			});
		}
		() 추가;
		TOTALCOST + = 가격;
		. $ ( '#의 Cartcontent') 데이터 그리드 ( 'loadData', 데이터);
		$ ( 'Div.cart .total') HTML ( '합계 : $'+ TOTALCOST);
	}	

제품의 배치, 우리는 이름과 상품 가격을 얻을, 다음 쇼핑 바구니를 업데이트 'addProduct'함수를 호출 할 때마다.

jQuery를 EasyUI 예제를 다운로드

jeasyui-dd-shopping.zip