如何附加<李>至<ul>使用可拖动和可丢弃

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

本文关键字：gt lt 拖动 何附加 ul      更新时间：2023-09-26

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

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

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

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

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

问题来自这一行：

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函数似乎没用。

我通过四处搜索找到了这个。jQuery可拖动+可丢弃：如何将丢弃的元素捕捉到元素上

Berry Pitman的回答成功了。我将投递代码更新为以下内容，并删除了moveCourse()功能：

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

更新的JSFiddle

相关文章：