Question

I know this has been asked many times, but I don’t understand what is incorrect about my code.

I have a series of DIV ‘columns’ containing some ‘object’ DIVs. I’m trying to move object DIVs from one column to another using the code below.

I don’t receive any errors, just nothing on the client and nothing to suggest in debug that anything is amiss.

Can anyone suggest why the following doesn’t work?

$(".column-heading").droppable({
    accept: ".column-item",
    drop: function (ev, ui) {
        //alert(this.id);
        //alert(ui.draggable.attr("id"));

        $(ui.draggable.attr("id")).appendTo($(this).parent());
    }
});

A sample column I am trying add/remove from is:

<div class="column">
    <div id="COL_1" class="column-heading">Status 1</div>
    <div id="OBJECT_1" class="column-item">Agreement 1</div>
    <div id="OBJECT_2" class="column-item">Agreement 2</div>
</div>

Answer 1

You would need to concatenate # into the selector with the ID.

$('#' + ui.draggable.attr("id")).appendTo(this);

Or, I believe ui.draggable is a jQuery object already, so try:

ui.draggable.appendTo(this);