[英]How can I get an elements ID on mouseover and assign it to a variable?
我开始学习如何使用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>
脚本
$(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");
}
});
});
});
基本上,您无需首先将mouse over
在mouse over
。
所有必需的信息都在drop
方法的ui和event参数中可用。
尝试这个
$(document).ready(function () {
$(function () {
$(".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) {
var employee = ui.draggable.text();
$(this).find(".placeholder").remove();
$("<li class='task-slot'></li>").text(employee)
.appendTo($(event.target).find('ul.tasked-employees'));
}
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.