Корзина покупок на jQuery

[pifon]

Всем привет

Начал прикручивать корзину для сайта по примеру отсюда

Немного встрял со следующей задачей:

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

пробовал добавить что-то вроде:

$(function() {
$('.items li').click(function(event, ui) {
var basket = $('.basket'), move = $(this), itemId = basket
.find("ul li[data-id='"+ move.attr("data-id")+ "']");

// далее идёт стандартный if-else для добавления и код для удаления из примера

не работает...

Прошу вашей профессиональной помощи, так как сам совсем ещё новичок в этом языке.

[ОлегА]

мало информации

[pifon]

дык http://xozblog.ru/2013/01/jquery-drag-n-drop-cart/ - здесь же всё написано. есть смысл весь код переписывать?

[ОлегА]

вы хотите чтобы вам помогли? у некоторых нет (например у меня) нет доступа на левые сайты

[pifon]

как-то так оно выглядит

<section id="product">
    <ul class="clear">
        <li data-id="1">
            <a href="#">
                <img src="http://lorempixel.com/150/100/technics/1/" alt="">
                <h3>Название товара</h3>
                <p>Описание</p>
            </a>
        </li>
        <li data-id="2">...</li>
        <li data-id="3">...</li>
    </ul>
</section>

<aside id="sidebar">
    <div class="basket">
        <div class="basket_list">
            <div class="head">
                <span class="name">Наименование</span>
                <span class="count">Кол-во</span>
            </div>
            <ul>
                <!-- Здесь будут располагаться позиции перемещенных товаров --> 
            </ul>
        </div>
    </div>
</aside>

$(function () {
		// jQuery UI Draggable
		$("#product li").draggable({
			// возвращает товар обратно на свое место после перетаскивания
			revert:true,
			// как только начинается перетаскивание мы делаем прозрачными остальные объекты
			// добавляем класс CSS
			drag:function () {
				$(this).addClass("activebasket");
				$(this).closest("#product").addClass("activebasket");
			},
			// удаляем CSS класс после перетаскивания
			stop:function () {
				$(this).removeClass("activebasket").closest("#product").removeClass("activebasket");
			} 
		});
        // jQuery Ui Droppable
		$(".basket").droppable({
			// CSS класс для корзины, срабатывает в момент начала перетаскивания товара
			activeClass:"activebasket",
			// CSS класс для корзины при появлении товара в области корзины
			hoverClass:"hover",
			// Определим режим сбрасывания. Сбросить товар можно при приближении к корзине
			// Возможные другие значения [url]http://api.jqueryui.com/droppable/#option-tolerance[/url]
			
			
			tolerance:"touch",
			drop:function (event, ui) {
				var basket = $(this),
						move = ui.draggable,
						itemId = basket.find("ul li[data-id='" + move.attr("data-id") + "']");
				// Если такой товар уже есть в корзине то добавляем +1 к количеству
				if (itemId.html() != null) {
					itemId.find("input").val(parseInt(itemId.find("input").val()) + 1);
				}
				else {
					// Иначе добавляем товар в корзину (функция ниже)
					addBasket(basket, move);
					// И добавляем количество
					move.find("input").val(parseInt(move.find("input").val()) + 1);
				}
			}
		});


		
		// Эта функция добавляет новый элемент списка в корзину
        function addBasket(basket, move) {
			basket.find("ul").append('<li data-id="' + move.attr("data-id") + '">'
					+ '<span class="name">' + move.find("h3").html() + '</span>'
					+ '<input class="count" value="1" type="text">'
					+ '<button class="delete">&#10005;</button>');
		}
        // Функция для удаления товара из списка 
        $(".basket ul li button.delete").live("click", function () {
			$(this).closest("li").remove();
		});
    });

[ОлегА]

пробуйте вот так

$(function() {
$('#product li').click(function(event, ui) {
   addBasket($('.basket'), $(this))
});

[pifon]

Если правильно понял, то вставить это нужно вместо:

tolerance:"touch",
drop:function (event, ui) {
var basket = $(this),
move = ui.draggable,
itemId = basket.find("ul li[data-id='" + move.attr("data-id") + "']");

[ОлегА]

нет, я же так понял вам нужен обработчик на клик так что это надо ставить отдельно

[pifon]

Надо же)) заработало! Спасибо вам, в очередной раз меня выручаете!