如何使用可拖放将 <li> 附加到 <ul>？

Posted 2023-05-08

【中文标题】如何使用可拖放将 <li> 附加到 <ul>？

【英文标题】：How to append <li> to <ul> using draggable and droppable?

【发布时间】：2016-09-01 06:35:33

【问题描述】：

当我使用 JQuery UI 中的可拖放对象时，我在控制 <li> 对象的位置时遇到了一个小问题。

我创建了这个非常精细的小提琴来说明我的问题：JSFiddle

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

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

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

【参考方案1】：

问题来自这一行：

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功能没用。

【参考方案2】：

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

Berry Pitman 的回答成功了。我将我的 drop-code 更新为以下内容并删除了 moveCourse() 函数：

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

更新JSFiddle