Drag and drop корзина tpl

В этом примере мы будем делать так, чтобы пользователи могли просто перетаскивать товары в корзину.

Для начала необходимо убедиться, что у вас в шаблоне используются макросы

%system includeQuickEditJs()%
%system includeEditInPlaceJs()%

А затем в шапку шаблона добавляем следующий код:

<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

<style type="text/css">
		.products{
			list-style:none;
			margin-right:300px;
			padding:0px;
			height:100%;
		}
		.products li{
			display:inline;
			float:left;
			margin:10px;
		}
		.object{
			display:block;
			text-decoration:none;
		}
		.object img{
			border:1px solid #333;
		}
		.object p{
			margin:0;
			font-weight:bold;
			text-align:center;
			color:#c3c3c3;
		}
		.basket_info{
			position:fixed;
			right:0;
			top:0;
			width:300px;
			height:100%;
			background:#ccc;
			padding:0px 10px;
		}
		h1{
			text-align:center;
			color:#555;
		}
		h2{
			position:absolute;
			font-size:16px;
			left:10px;
			bottom:20px;
			color:#555;
		}
		.total{
			margin:0;
			text-align:right;
			padding-right:20px;
		}
	</style>

<script>
		var data = {"total":0,"rows":[]};
		var totalCost = 0;

		$(function(){
			$('#cartcontent').datagrid({
				singleSelect:true
			});
			$('.object').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';
				}
			});
			$('.basket_info').droppable({
				onDragEnter:function(e,source){
					$(source).draggable('options').cursor='auto';
				},
				onDragLeave:function(e,source){
					$(source).draggable('options').cursor='not-allowed';
				},
				onDrop:function(e,source){
                                        id = 64;
					alert('Товар добавлен в корзину');
                                        jQuery.post("/emarket/basket/put/element/"+id+"/");
                                        location.reload();
				}
			});
		});

		function addProduct(name,price){
			function add(){
				alert('Bas');
			}
			add();
			totalCost += price;
			$('#cartcontent').datagrid('loadData', data);
			$('div.basket_info .total').html('Total: $'+totalCost);
		}
	</script>

На это всё, drug and drop перетаскивание в корзину должно заработать.

Примечание: все товары которые вы желаете перетаскивать в корзину должны иметь класс "object", а сама корзина класс "basket_info".
Внимание: функционирование описанного выше примера гарантируется только в версии 2.8.6
Инструкция для xslt шаблона Drag and drop корзина xslt