当我从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