我开始学习如何使用 jQuery 并正在创建一个小型项目管理应用程序。在应用程序中,您可以将员工从列表中拖放到不同的项目中以分配给他们。
在每个项目 div 中都有一个 ul,我希望将员工附加到该 ul 中。目前的问题是我可以将员工添加到 div 中,但他们添加到 ul 之外。我尝试设置一个变量来从项目 div 中获取元素 id 并将其分配给一个变量。然后该变量将在 appendTo() 调用中连接以将项目添加到正确的列表中。这是我遇到问题的地方。该变量一直作为 [object Object] 返回。
感谢您提前提供任何帮助。这里也是JSFiddle的链接。
HTML
<ul class='employee-list'>
<li class='employee'>Ian</li>
<li class='employee'>Danny</li>
</ul>
<div id='task-list'>
<div id="task-1234" class='task'>
<h3>Design new email</h3>
<ul id="task-1234-employees" class='tasked-employees'></ul>
</div>
<div id ="task-4321" class='task'>
<h3>Update Cart Code</h3>
<ul id ="task-4321-employees" class='tasked-employees'></ul>
</div>
</div>
脚本
$(document).ready(function () {
$(function () {
var $taskID = $('.task').mouseover(function() {return this.id;});
$(".employee").draggable({
revert: 'invalid'
}, {
snap: '.task-slot',
snapMode: 'inner'
}, {
appendTo: 'body',
helper: 'clone'
});
$('.task').droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
$(this).find(".placeholder").remove();
$("<li class='task-slot'></li>").text(ui.draggable.text()).appendTo("#" + $taskID +"-employees");
}
});
});
});