Question

$(".item").draggable({
    revert: true            
});
$("#cart_items").draggable({
    axis: "x"
});

$("#cart_items").droppable({


    drop: function(event, ui) {
        var item = ui.draggable.html();
            console.log(item);

        var html = '<div class="item icart">';
        html = html + '<div class="divrm">';
        html = html + '<a onclick="remove(this)" class="remove">&times;</a>';
        html = html + '<div/>'+item+'</div>';
        $("#cart_items").append(html);+ 

I understand that with var html I am creating all html and appending it to the DOM, but why I need this? var item = ui.draggable.html(); What does ui.draggable stands for?

Answer 1

In the function, ui is the passed in object. ui happens to be an event. This event has a property draggable. Lastly .html() gets the inner HTML of the object.

The line var item = ui.draggable.html(); equates to:

item equals the object ui‘s property draggable‘s inner HTML contents.

From the structure of the function I would assume the ui event is a drag and drop opperation and that the draggable content is an item for an e-commerce shopping cart.