Javascript 如何在鼠标上方获取元素ID并将其分配给变量？

我开始学习如何使用jQuery，并正在创建一个小型项目管理应用程序。在应用程序中，您可以从列表中拖动员工，然后将他们放到不同的项目中，以将他们分配给该项目

在每个项目部门内都有一个ul，我希望将员工添加到其中。目前的问题是，我可以将员工添加到部门，但他们添加到ul之外。我尝试设置一个变量，从projectdiv中获取元素id并将其分配给一个变量。然后在appendTo（）调用中将该变量连接起来，以将该项添加到右侧列表中。这就是我的问题所在。变量一直以[object]的形式返回

提前谢谢你的帮助。这里也有一个链接

HTML

伊恩
丹尼

设计新电子邮件

更新购物车代码

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");
        }
    });
});
});

$（文档）.ready（函数（）{
$（函数（）{
var$taskID=$（'.task'）.mouseover（函数（）{返回this.id；}）；
$（“.employee”）.draggable({
回复：“无效”
}, {
快照：'.task slot'，
快照模式：“内部”
}, {
附于：'正文'，
助手：“克隆”
});
$（'.task'）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
$（this.find（“.placeholder”）.remove（）；
$（“
”）.text（ui.draggable.text（））.appendTo（“#”+$taskID+”-employees”）；
}
});
});
});

首先，基本上您不需要将

鼠标移到

上

所有必需的信息都可以在

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'));
            }
        });
    });
});

$（文档）.ready（函数（）{
$（函数（）{
$（“.employee”）.draggable({
回复：“无效”
}, {
快照：'.task slot'，
快照模式：“内部”
}, {
附于：'正文'，
助手：“克隆”
});
$（'.task'）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
var employee=ui.draggable.text（）；
$（this.find（“.placeholder”）.remove（）；
$（“
”）文本（员工）
.appendTo（$（event.target）.find（'ul.taskaged employees'）；
}
});
});
});

$(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'));
            }
        });
    });
});