Question

当我在JQuery UI中使用draggable和droppable时，我有一个小问题控制<li>个对象的位置。

我创造了这个非常精细的小提琴来说明我的问题：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的答案奏效了。我将我的drop-code更新为以下内容并删除了moveCourse()函数：

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

更新了JSFiddle

Answer 2

问题来自这一行：

＆＃13;

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
}

＆＃13;

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

P.S：似乎moveCourse函数没用。

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

2 个答案: