Question

我正在使用jQuery和FoxyCart拖放购物车，拖放工作，但我不知道如果项目被放入购物车，如何自动打开链接（在拖动元素内）。 / p>

基本上我有一个<ul>列表<li class="drag">，里面有<a href="..."><img src=".." alt="thumbnail"/></a>和<a href="..." class="addtocart">Add to cart</a>。添加到购物车的链接是使用css隐藏的，但我需要它，这样当我在购物车中放置一个项目时，它将打开这个隐藏的链接（因为链接打开一个模态框并在真正的购物车中添加项目由FoxyCart提供）。对我来说问题是我不知道jquery那么好，我不知道如何从其余部分过滤链接然后打开它。

Answer 1

如果您的列表如下所示：

<ul>
    <li class="drag">
        <a href="whatever" class="link-to-open">this link will be opened when dropped</a>
    </li>
    <li class="drag">
        <a href="whatever" class="link-to-open">this link will be opened when dropped</a>
    </li> 
</ul>

在购物车中Droppable对象：

$('#shopping-cart').droppable({
    drop: function(e,ui) {
        $(ui.draggable).find('.link-to-open').click()
    }
});

Answer 2

这是你的代码：

$('.drag').draggable({
                revert: "invalid",
                helper: "clone"
            });
$('.cart').droppable({
    accept: ".drag",
    drop: function(event, ui){       
        window.location=$(ui.draggable).find("a.addtocart").attr("href");
    }
});

以下是DEMO

Answer 3

在您要拖动的元素上，例如包含缩略图和项目名称等的DIV，您需要为其提供类似shoppingcartItem的类（或您选择的其他内容）

您拖动的项目的jQuery将是

$('.shoppingcartItem').draggable({ 
    /* Don't forget, you can change this class name to match what you have */
    revert: "invalid",
    helper: "clone"
});

然后，您需要将购物车区域与“shoppingCart”中的类或ID放在一起，我觉得ID在这种情况下更有意义，因为您只有一个购物车和这个购物车将仅用作购物车。

$('#shoppingCart').droppable({
    accept: ".shoppingcartItem", /* this needs to match up with what you used */
    drop: function(event, ui){       
        window.location=$(ui.draggable).find("a.postAddToCart").attr("href");
    }
});

现在，为了解释这里的'功能'，这是搜索链接标记的<a>标记，其中包含类postAddToCart，然后调用链接标记。虽然这将在同一窗口中打开链接。我不太确定这是否是您想要的，如果不是，this可能会帮助您

jQuery拖动;删除拖动元素内的自动打开链接

3 个答案: