CODEWITHSUNDEEP
javascriptjqueryjquery-ui
kylieCatt
kylieCatt

Reputation: 11039

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. 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. The problem at the moment is I can get the employees added tot he div but they add outside the ul. I have tried setting up a variable to grab the element id from the project div and assign it to a variable. That variable would then be concatenated in the appendTo() call to add the item to the right list. This where I am having the problem. The variable keeps returning as [object Object].

Thanks for any help in advance. Here is a link to the JSFiddle aswell.

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

Upvotes: 0

Views: 951

Answers (1)

Sushanth --
Sushanth --

Reputation: 55750

Basically you have no need for the mouse over in the first place.

All the required info is available in the ui and event arguments of the drop method.

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

Check Fiddle

Upvotes: 1

Related Questions