How to append
to
using draggable and droppable?

Question

I have a tiny problem controlling where my <li> objects go when I use draggable and droppable from JQuery UI.

I have created this pretty elaborative fiddle to illustrate my problem: JSFiddle

Why doesn't the .courseBox go into the .semester <ul>?

The .courseBox should be movable back and forth and it's not only when trying to append it to the .semester I have this problem. It happens when trying to move the .courseBox back to the .basket as well.

I believe it could have something to do with my moveCourse function.

score 1 · Accepted Answer · edited May 23 '17 at 10:28

I found this by searching around a little. jQuery draggable + droppable: how to snap dropped element to dropped-on element

The answer from Berry Pitman did the trick. I updated my drop-code to the following and removed the moveCourse() function:

drop: function(ev, ui) {
    var dropped = ui.draggable;
    var droppedOn = $(this);
    $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}

Updated JSFiddle

score 1 · Answer 2 · answered May 06 '16 at 09:15

The issue comes from this line :

function moveCourse(item, target){
  var parent = item.parent();
  var boxId = item.attr("id");
  console.log(parent.attr("id") + " contains " + boxId);
  console.log("target is: " + target.attr("id"));
  parent.find(boxId).remove(); // Here you are deleting the li element
  target.append(item); // THIS LINE
}

So basically, you're deleting the li element and then you re-append the li element in the target container.

P.S : It seems that the moveCourse function is useless.

How to append to using draggable and droppable?

2 Answers2

How to append
to
using draggable and droppable?