1

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.

Zeliax
  • 4,987
  • 10
  • 51
  • 79

2 Answers2

1

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

Community
  • 1
  • 1
Zeliax
  • 4,987
  • 10
  • 51
  • 79
1

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.

Meyer Cohen
  • 350
  • 1
  • 12