body { font: bold 12px arial; } span { float: left; margin-top: 17px; text-align: center; width: 100%; } #trash, #items, .item { height: 50px; width: 50px; } #trash { color: #354e62; } #items { margin-top: 10px; width: 100%; } .item { background: #cdcdcd; color: #3b3b3b; float: left; margin-right: 10px; } .over { background-color: #cedae3; } .out { background-color: #a6bcce; $(function() { $(".item").draggable({ revert: true }); $("#trash").droppable({ tolerance: 'touch', over: function() { $(this).removeClass('out').addClass('over'); }, out: function() { $(this).removeClass('over').addClass('out'); }, drop: function() { var answer = confirm('Permantly delete this item?'); $(this).removeClass('over').addClass('out'); } }); });
Trash
Item 1
Item 2
Item 3
// 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); } } }); function addBasket(basket, move) { basket.find("ul").append('
  • ' + '' + move.find("h3").html() + '' + '' + ''); } $(".basket ul li button.delete").live("click", function () { $(this).closest("li").remove(); });
    // 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"); } }); function addBasket(basket, move) { basket.find("ul").append('
  • ' + '' + move.find("h3").html() + '' + '' + ''); } $(".basket ul li button.delete").live("click", function () { $(this).closest("li").remove(); });