jEasyUI는 드래그 앤 드롭 장바구니를 생성합니다.

웹 앱을 통해 간단히 드래그 앤 드롭을 구현할 수 있다면 뭔가 특별한 것이 있다는 것을 알 수 있습니다. jQuery EasyUI를 사용하면 웹 애플리케이션에서 드래그 앤 드롭 기능을 간단하게 구현할 수 있습니다.

이 튜토리얼에서는 사용자가 구매하고 싶은 항목을 끌어다 놓을 수 있는 장바구니 페이지를 만드는 방법을 보여 드리겠습니다. 장바구니에 담긴 상품과 가격이 업데이트됩니다.

페이지에 제품 표시

	<ul class="products">
		<li>
			<a href="#" class="item">
				<img src="../style/images/shirt1.gif"/>
				<div>
					<p>Balloon</p>
					<p>Price:</p>
				</div>
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<img src="images/shirt2.gif"/>
				<div>
					<p>Feeling</p>
					<p>Price:</p>
				</div>
			</a>
		</li>
		<!-- other products -->
	</ul>

위 코드에서 볼 수 있듯이 일부 <li> 요소가 포함된 <ul> 요소를 추가하여 제품을 표시합니다. 모든 제품에는 <p> 요소에 포함된 이름 및 가격 속성이 있습니다.

장바구니 만들기

	<div class="cart">
		<h1>Shopping Cart</h1>
		<table id="cartcontent" style="width:300px;height:auto;">
			<thead>
				<tr>
					<th field="name" width=140>Name</th>
					<th field="quantity" width=60 align="right">Quantity</th>
					<th field="price" width=60 align="right">Price</th>
				</tr>
			</thead>
		</table>
		<p class="total">Total: 
	$('.item').draggable({
		revert:true,
		proxy:'clone',
		onStartDrag:function(){
			$(this).draggable('options').cursor = 'not-allowed';
			$(this).draggable('proxy').css('z-index',10);
		},
		onStopDrag:function(){
			$(this).draggable('options').cursor='move';
		}
	});
</p>
		<h2>Drop here to add to cart</h2>
	</div>

우리는 장바구니에 담긴 품목을 표시하기 위해 데이터 그리드를 사용합니다.

복제된 항목 드래그

	$('.cart').droppable({
		onDragEnter:function(e,source){
			$(source).draggable('options').cursor='auto';
		},
		onDragLeave:function(e,source){
			$(source).draggable('options').cursor='not-allowed';
		},
		onDrop:function(e,source){
			var name = $(source).find('p:eq(0)').html();
			var price = $(source).find('p:eq(1)').html();
			addProduct(name, parseFloat(price.split('$')[1]));
		}
	});
	var data = {"total":0,"rows":[]};
	var totalCost = 0;
	function addProduct(name,price){
		function add(){
			for(var i=0; i<data.total; i++){
				var row = data.rows[i];
				if (row.name == name){
					row.quantity += 1;
					return;
				}
			}
			data.total += 1;
			data.rows.push({
				name:name,
				quantity:1,
				price:price
			});
		}
		add();
		totalCost += price;
		$('#cartcontent').datagrid('loadData', data);
		$('div.cart .total').html('Total: $'+totalCost);
	}

드래그 가능 속성 값을 'proxy'에서 'clone'으로 설정했기 때문에 드래그 가능한 요소가 복제에 의해 생성됩니다.

선택한 항목을 장바구니에 담으세요

항목을 넣을 때마다 먼저 항목 이름과 가격을 가져온 다음 'addProduct' 기능을 호출하여 장바구니를 업데이트합니다.

jeasyui-dd-shopping.zip

jeasyui-dd-shopping.zip