如何使用 draggable 和 droppable 将 <li> 附加到 <ul>？

Question

当我使用 JQuery UI.

中的 draggable 和 droppable 时，我在控制 <li> 对象的位置时遇到了一个小问题

我创建了这个非常详尽的 fiddle 来说明我的问题：JSFiddle

为什么 .courseBox 不进入 .semester <ul>？

.courseBox 应该可以来回移动，而且不仅仅是在尝试将其附加到 .semester 时我遇到了这个问题。当试图将 .courseBox 移回 .basket 时也会发生这种情况。

我相信这可能与我的 moveCourse 功能有关。

Answer 1

我通过四处搜索找到了这个。 jQuery draggable + droppable: how to snap dropped element to dropped-on element

Berry Pitman 的回答起到了作用。我将我的放置代码更新为以下内容并删除了 moveCourse() 函数：

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

已更新JSFiddle

Answer 2

问题来自这一行：

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
}

基本上，您要删除 li 元素，然后将 li 元素重新附加到目标容器中。

P.S : 看来moveCourse这个功能没用了

如何使用 draggable 和 droppable 将 <li> 附加到 <ul>？

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

html

javascript

jquery

jquery-ui-draggable

jquery-ui-droppable