• Drag and drop Product items into the Cart with jQuery UI

    Concept of Drag and drop product from list to Cart has popular uses for shopping cart. We can use it in many other functionality. Like, drag and drop Answer from the list of answers of question.

    It will have support for add-to-basket with quantity updates (so that the same items could be added more than once) and removing items from the basket. It will be totally client-side and cover the basic functionality (no PayPal integration, etc.).

    For that, we’ll be using, probably the best drag-drop library, jQuery UI Draggable/Droppable in this tutorial. Here is the end result :

    Let’s get started:

    Step 1 : Download the custom jQuery UI package

    Downlaod : http://jqueryui.com/download/

    jQuery UI has lots of features and every feature adds bytes to its source, it is much more smarter to get only what we need.

    As you can see from the screenshot above, we need the Core, Widget, Mouse from the core and Draggable + Droppable from the interactions.

    Step 2 : Put code for Insert the JS files into the web page

    Let’s make sure we have the jQuery and jQuery UI inserted in the web page. Just add these lines inside thetags.

    1
    
     

    Step 3 : The HTML for the products

    Let’s use a simple unordered list structure for featuring the products:


    • Product name

      Product detail

    Step 4 : The HTML for the basket

    Step 5 : Let’s start dragging

    As you already know we’ll be using the jQuery UI Draggable and Droppable:

    View Code JQUERY
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    
    // jQuery UI Draggable
     
    $("#product li").draggable({
     
        // brings the item back to its place when dragging is over
     
        revert:true,
     
        // once the dragging starts, we decrease the opactiy of other items
     
        // Appending a class as we do that with CSS
     
        drag:function () {
     
            $(this).addClass("active");
     
            $(this).closest("#product").addClass("active");
     
        },
     
        // removing the CSS classes once dragging is over.
     
        stop:function () {       $(this).removeClass("active").closest("#product").removeClass("active");
     
        }
     
    });

    Step 6 : And, time for dropping

    The item will be dropped elegantly, thanks to the jQuery UI Droppable:

    View Code JQUERY
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    
    // jQuery UI Droppable
     
    $(".basket").droppable({ 
     
        // The class that will be appended to the to-be-dropped-element (basket)
     
        activeClass:"active",
     
        // The class that will be appended once we are hovering the to-be-dropped-element (basket)
     
        hoverClass:"hover", 
     
        // The acceptance of the item once it touches the to-be-dropped-element basket
     
        // For different values http://api.jqueryui.com/droppable/#option-tolerance
     
        tolerance:"touch",
     
        drop:function (event, ui) {
     
            var basket = $(this),
     
                    move = ui.draggable,
     
                    itemId = basket.find("ul li[data-id='" + move.attr("data-id") + "']"); 
     
            // To increase the value by +1 if the same item is already in the basket
     
            if (itemId.html() != null) {
     
                itemId.find("input").val(parseInt(itemId.find("input").val()) + 1);
     
            }
     
            else {
     
                // Add the dragged item to the basket
     
                addBasket(basket, move);
     
                // Updating the quantity by +1" rather than adding it to the basket
     
                move.find("input").val(parseInt(move.find("input").val()) + 1);
     
            }
     
        }
     
    });

    Step 7 : Adding the dropped item to the basket

    We are no wadding the item to the basket with any details it has:

    View Code JAVASCRIPT
    1
    2
    3
    
    function addBasket(basket, move) {
     
        basket.find("ul").append('
    • ‘ + ‘‘ + move.find(“h3″).html() + ‘‘ + ‘‘ + ‘‘); }

    Step 8 : Deleting an item for the basket

    A simple way to remove items from the basket:

    View Code JQUERY
    1
    2
    3
    4
    5
    
    $(".basket ul li button.delete").live("click", function () {
     
        $(this).closest("li").remove();
     
    });
    Tags:

Comments on this post

Leave a Reply

  • Security Code :


    four × = 20