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();
    }
}

除了拖放功能，我还想让项目可点击，点击项目/产品，它将出现在购物车中:(任何帮助posible..thanks提前

Answer 1

在我看来，你必须在阻力与阻力之间做出选择。丢弃和点击行为。尝试实现这两者会让您的用户感到困惑，并使您的代码难以适应。但要回答您的问题，您可以通过以下方式启用对元素的点击：

最好的选择是在图片上设置链接：

private final static String createNewObject = "INSERT INTO my_table"
            + "(ID, \"MODEL\", STATUS, OVERRIDE, DISABLED) " 
            + "VALUES "
            + "(?, ?, ?, SYSDATE, SYSDATE)";

这可以在ajax中使用。

如果您仍希望实施拖拽和放大点击，你应该考虑分开两个功能的显示：一个区域启用拖动点击，另一个区域直接添加产品到购物车：

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

Answer 2

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

，但..

我已经弄明白了！耶！

这是一个点击功能：

$（＆＃39; .product img＆＃39;）。click（function（）{ var param = $（this）.attr（＆＃39; src＆＃39;）; if（$。browser.msie＆amp;＆amp; $ .browser.version ==＆＃39; 6.0＆＃39;）{param = $（this）.attr（＆＃39; style＆＃39;）。match（ / SRC = \＆＃34;（[^ \＆＃34;] +）\＆＃34; /）; param = param [1]; } addlist（PARAM）; }）;

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

Jquery / Ajax Drag n Drop to CLICK功能

2 个答案: