Question

I can’t seem to find any tutorial on Google regarding this, but I’ve seen people do it in some websites.

I’m trying to create a form where my users can drag and drop products into their shopping list but I have no idea how to get jQuery UI’s draggable to set the values for that specific form field once it has been dropped.

Answer 1

There is a drop event that is fired when you drop something:

drop( event, ui )
Triggered when an accepted draggable is dropped on the droppable (based on the tolerance option).

So all you need to do is listen for the drop event and update something (such as an <input type="hidden">) in the form as needed. You could use a data attribute on the draggable to identify the product elements:

<div data-product="pancakes">
    <!-- ... -->
</div>

and then do something like this to update your form:

$("#droppable").droppable({
    drop: function(event, ui) {
        // ui.draggable is the jQuery object for the thing being dragged (and
        // hence the thing being dropped).
        $('input').val(ui.draggable.data('product'));
    }
});

Demo: http://jsfiddle.net/ambiguous/6Cy97/