Question

I thought I’d put the working solution here for others interested in a code sample.

Each draggable item has it’s id set to the item id. Here is the source view of a draggable item:

<div id="item">
    <ul>
         <li class="list_none" id="15">
               Black phone
         </li>
    </ul>
</div>

Here’s the jQuery script making it ‘draggable.’ I’ve updated it to reflect dmck’s input:

$( "#item li" ).each(function(index, value) {
    $this = $(value);
    var drag_id = $this.attr("id");
    $this.draggable({
            appendTo: "body",
            helper: "clone"
    }).data("drag_id", drag_id)
});

Passing the drag_id value to droppable was a problem but it works now.

$( "#group ul" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function( event, ui ) {
        // alert(ui.draggable.data("drag_id")); // left this alert in for other tinkerers
        $('input[name=user_id]').val(ui.draggable.data("drag_id"));
        $(this).closest('form').submit();
        return false;
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
   }

Thanks.

Answer 1

Use the jQuery each to bind every element:

$( "#item li" ).each(function(index, value) {

    $this = $(value);

    var itemid = $this.attr("id");

    $this.draggable({
            appendTo: "body",
            helper: "clone"
    }).data("itemid", itemid)
});