jQuery Drag & Drop automatically open link inside drag element

Question

I'm making a drag and drop shopping cart using jQuery and FoxyCart, the drag and drop work but I don't know how to automatically open a link (inside the drag element) once item is dropped into the cart.

Basically I have a list <ul> with <li class="drag"> and inside I have <a href="..."><img src=".." alt="thumbnail"/></a> and <a href="..." class="addtocart">Add to cart</a>. The link for adding to cart is hidden using css, but I need it such that when I drop an item in the shopping cart, it will open this hidden link (because the link opens a modal box and add the item in the real shopping cart provided by FoxyCart). The problem for me is that I don't know jquery that well and I don't know how filter the link from the rest and then open it.

Nobody can answer? ..at least tell me whether it's possibile or not, because I'm going crazy trying to understand the documentation of jQuery and I really don't know where and what I need to look for :) — Raffaele, Aug 20 '09 at 13:01
Hey, Raf, if you see an answer that strikes your fancy, let me know and I'll select that as correct. — , Mar 16 '12 at 16:08

nathanjosiah · Answer 1 · 2012-03-16T15:41:07.633

5

If your list looks like this:

<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>

In your shopping cart Droppable object:

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

edited Mar 16 '12 at 15:41

answered Mar 14 '12 at 22:20

nathanjosiah

4,441
4
35
47

`$(ui.draggable).find('.link-to-open').click()` – Ast Derek Mar 16 '12 at 08:12
I think, $(ui.draggable).find('.link-to-open').trigger("click") instead of click(), is more in place (seems more right;)) – NickGreen Mar 20 '12 at 14:21
I originally had `trigger('click')` and I do normally use that, but for the sake of simplicity, i changed it to click. – nathanjosiah Mar 20 '12 at 15:21

score 4 · Answer 2 · answered Mar 16 '12 at 15:32

Here is your code:

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

Here is the DEMO

score 1 · Answer 3 · edited May 23 '17 at 11:59

On the elements you want to drag, such as a DIV which has you thumbnail and item name etc. you need to give it a class like shoppingcartItem (or what ever else you have chosen)

The jQuery for the item that you drag will then be

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

Then, you need to have you cart area that you drop items onto with a class or ID along the lines of "shoppingCart", I think ID make more sense in this case, as you would only have one cart and this cart will be used only as a cart.

$('#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");
    }
});

Now, to explain the 'function' here, this is searching for an <a> tag, of link tag, which has a class postAddToCart and then call the link tag. Though this will open the link in the same window. I am not too sure if this is what you want, if not perhaps this will help you out

jQuery Drag & Drop automatically open link inside drag element

3 Answers3