[英]How can I get an elements ID on mouseover and assign it to a variable?
I'm beginning to learn how to use jQuery and am creating a small project management app. 我开始学习如何使用jQuery,并正在创建一个小型项目管理应用程序。 In the app you can drag employees from a list and drop them on to the different projects to assign them to it.
在应用程序中,您可以将员工从列表中拖放到其他项目上以将其分配给他们。
Inside each project div is a ul that I would like the employees to be appended to. 在每个项目div中都有一个ul,我希望将其附加到员工身上。 The problem at the moment is I can get the employees added tot he div but they add outside the ul.
目前的问题是我可以让员工添加到div中,但是他们在ul之外添加。 I have tried setting up a variable to grab the element id from the project div and assign it to a variable.
我尝试设置一个变量以从项目div中获取元素ID,并将其分配给变量。 That variable would then be concatenated in the appendTo() call to add the item to the right list.
然后,该变量将在appendTo()调用中串联起来,以将项目添加到正确的列表中。 This where I am having the problem.
这是我遇到的问题。 The variable keeps returning as [object Object].
变量一直返回为[object Object]。
Thanks for any help in advance. 感谢您的任何帮助。 Here is a link to the JSFiddle aswell.
这也是到JSFiddle的链接。
HTML 的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");
}
});
});
});
Basically you have no need for the mouse over
in the first place. 基本上,您无需首先将
mouse over
在mouse over
。
All the required info is available in the ui and event arguments of the drop
method. 所有必需的信息都在
drop
方法的ui和event参数中可用。
Try this 尝试这个
$(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.