jQuery の使い方を学び始め、小さなプロジェクト管理アプリを作成しています。アプリでは、従業員をリストからドラッグして別のプロジェクトにドロップし、割り当てることができます。
各プロジェクト div 内には、従業員を追加する 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>
Jscript
$(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");
}
});
});
});