CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui-draggablejquery-ui-droppable
Zeliax
Zeliax

Reputation: 5386

How to append <li> to <ul> using draggable and droppable?

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.

Upvotes: 1

Views: 551

Answers (2)

Zeliax
Zeliax

Reputation: 5386

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

Upvotes: 1

Meyer Cohen
Meyer Cohen

Reputation: 350

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.

Upvotes: 1

Related Questions