1

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.

2

1 Answer 1

4

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)
});
1
  • +1 for valuable help. I am having trouble passing the variable from draggable to droppable. Will update the question.
    – Jay
    Jun 22, 2012 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.