JQuery draggable/droppable: drop div not taking ownership of dragged item

Question

I'm working on an application for my kids' summer camp which should let counselors drag a camper's name from one activity to another within a larger activity grouping. I'm using JQuery draggable and droppable, and it's all working well, except for one thing: after I drag a an item to a different droppable container, the document is not updated. I created a jsfiddle that shows the behavior:

https://jsfiddle.net/1sbuv82q/

To demonstrate the behavior I'm asking about, go to the Fiddle, and drag "Mattias Jabs" from Cooking to Krav Maga. Then click Save, and check the console log: you'll see "DBG: Camper ID 4 is here!" logged for Chug ID 3, not 2, even though we moved camper 4 from 3 to 2 in the UI.

I think the fix should go somewhere here:

$el.sortable({
    connectWith: '.chugholder'
  });
  $el.droppable({
    accept: "ul.gallery li",
    activeClass: "ui-state-active",
    hoverClass: "ui-state-hover"
  });

I tried following some suggestions to detach from the original container, but that only caused the camper to be detached- he still did not appear in the dragged-to container (the camper icon also became unmoveable after that- I want the user to be able to move the camper as many times as they like before the they hit save).

I tried following the suggestion here, adding a "drop" function to the .droppable:

$el.droppable({accept: "ul.gallery li",
             activeClass: "ui-state-active",
             hoverClass: "ui-state-hover",
             drop: function(event, ui) {
             var droppedOn = $(this);
             var dropped = ui.draggable;
             droppedOn.addClass("ui-state-highlight");
             $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
        }
);

This line is trying to detach the dragged item from its old div and then attach it to the new div:

$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);

That did move the dropped item to the new location, but the dragged item still did not register when I queried the contents of the dropped-to div tag. Also, the dragged item could no longer be moved. OTOH, the dragged item did disappear from the source <div>, so it seems like this might be the right track.

Any help would be much appreciated- thank you!

Answer 1

You were pretty close to the answer. The problem is with the lines you were adding:

// Let chug holders be droppable.                    
$('.chugholder').each(function() {
  var $el = $(this);
  $el.droppable({
    accept: "ul.gallery li",
    activeClass: "ui-state-active",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
         var droppedOn = $(this);
         var dropped = ui.draggable;
         droppedOn.addClass("ui-state-highlight");
         $(dropped).detach().css({top:0,left:0}).appendTo(droppedOn);
    }
  });

When you get droppedOn, you are probably getting the .chugholder. You don't want to put the dropped li in the div.chugholder, you want to put it in the ul.gallery. Therefore just change

 var droppedOn = $(this);

to

 var droppedOn = $(this).find(".gallery").addBack(".gallery");

The find method finds the children that match the selector and the addBack method adds back the element originally dropped on if it also matches the selector. JSFiddle