jQuery / Ajax拖动n放下CLICK功能

Question

首先，请看一下这个演示： http : //demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.php摘自tutorialzine.com

我已经接受了它，并在我的项目中使用了购物车。 到目前为止没有错误，拖动n下降真的很可爱。 我想做的是，商品/产品也可以点击。 我在jquery / ajax资料中仍然是新事物，所以我很难使其使其可单击而不是将其拖放到购物车中。

这是script.js中包含拖放功能的代码：

var purchased=new Array();  //an array containing all the products we've purchased so far
var totalprice=0;   //the total price

$(document).ready(function(){

    $('.product').simpletip({   //using the simpletip plugin

        offset:[40,0],
        content:'<img style="margin:10px;" src="img/ajax_load.gif" alt="loading" />',   // default content
        onShow: function(){

            var param = this.getParent().find('img').attr('src');
            // fix for IE6
            if($.browser.msie && $.browser.version=='6.0')
            {
                param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);
                param = param[1];
            }

            // after the tooltip is shown, load the tips.php file and pass the image name as a parameter
            this.load('ajax/tips.php',{img:param});
        } 

    });

    $(".product img").draggable({   // enable all product images to be dragged

    containment: 'document',
    opacity: 0.6,
    revert: 'invalid',
    helper: 'clone',
    zIndex: 100

    });

    $("div.content.drop-here").droppable({  // convert the shopping cart to a droppable

            drop:
                function(e, ui)
                {
                    var param = $(ui.draggable).attr('src');
                    // IE6 fix
                    if($.browser.msie && $.browser.version=='6.0')
                    {
                        param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
                        param = param[1];
                    }

                    addlist(param); // the special addlist function - see below
                }

    });

});

script.js的第二部分：

function addlist(param)
{
    // the addlist function ads a product to the shopping cart

    $.ajax({    // sending an ajax request to addtocart.php
    type: "POST",
    url: "ajax/addtocart.php",
    data: 'img='+encodeURIComponent(param), // the product image as a parameter
    dataType: 'json',   // expecting json
    beforeSend: function(x){$('#ajax-loader').css('visibility','visible');},    // showing the loading gif
    success: function(msg){

        $('#ajax-loader').css('visibility','hidden');   // hiding the loading gif animation
        if(parseInt(msg.status)!=1)
        {
            return false;   // if there has been an error, return false
        }
        else
        {
            var check=false;
            var cnt = false;

            for(var i=0; i<purchased.length;i++)
            {
                if(purchased[i].id==msg.id) // find if we have already bought this prduct
                {
                    check=true;
                    cnt=purchased[i].cnt;

                    break;
                }
            }

            if(!cnt)    // if we haven't bought it yet, or we have removed it from the purchases, we insert it in the shopping cart
                $('#item-list').append(msg.txt);

            if(!check)  // if we haven't bought it yet, insert it in the purchased array
            {
                purchased.push({id:msg.id,cnt:1,price:msg.price});
            }

            else    // else if we've bought it
            {
                if(cnt>=3) return false;    // 3 products of type max

                purchased[i].cnt++;
                $('#'+msg.id+'_cnt').val(purchased[i].cnt); // update the select box
            }

            totalprice+=msg.price;  // recalculate the price
            update_total(); // update the total div

        }

        $('.tooltip').hide();   // hiding the tooltip (sometimes it stays on screen after the drag)

    }
    });
}

function findpos(id)    // a helper function that finds the position at which the product is inserted in the array, returns the position
{
    for(var i=0; i<purchased.length;i++)
    {
        if(purchased[i].id==id)
            return i;
    }

    return false;
}

function remove(id) // remove a product from the shopping cart
{
    var i=findpos(id);  // find its position in the array

    totalprice-=purchased[i].price*purchased[i].cnt;    // recalculate the price
    purchased[i].cnt = 0;   // reset the counter

    $('#table_'+id).remove();   // remove it from the cart
    update_total(); // update the total price counter on the page
}

function change(id) // evoked when we change the number of products via the select area
{
    var i=findpos(id);

    totalprice+=(parseInt($('#'+id+'_cnt').val())-purchased[i].cnt)*purchased[i].price;

    purchased[i].cnt=parseInt($('#'+id+'_cnt').val());
    update_total();
}

function update_total() // function that updates the total price div on the page
{
    if(totalprice)
    {
        $('#total').html('total: $'+totalprice);    // if we've bought somehitng, show the total price div and the purchase button
        $('a.button').css('display','block');
    }
    else    // hide them
    {
        $('#total').html('');
        $('a.button').hide();
    }
}

除了拖放功能外，我还想使商品可点击，请点击商品/产品，它会出现在购物车中：(任何可能的帮助。

Answer 1

我认为，您必须在拖放和点击行为之间进行选择。 试图同时实现这两种方法会使您的用户困惑，并使您的代码难以适应。 但是要回答您的问题，请执行以下操作来启用对元素的单击：

最好的选择是在图像上设置一个链接：

<a href="addToCart.php?id=78"><img.....></a>

这可以在ajax中工作。

如果仍然希望同时实现拖放和点击，则应考虑将两个功能的显示分开：一个区域启用点击拖动，另一个区域将产品直接添加到购物车：

<img ... alt="click to drag !"><br>
<a href="#">Click to add to cart !</a>

Answer 2

感谢您的回答。 虽然我没有得到任何xD

但..

我知道了！ 好极了！

这是一个点击功能：

$（'。product img'）。click（function（）{var param = $（this）.attr（'src'）; if（$。browser.msie && $ .browser.version =='6.0'）{ param = $（this）.attr（'style'）。match（/ src = \\“（[[^ \\”] +）\\“ /）; param = param [1];} addlist（param）;}）;

现在它既可点击又可拖动：D