jQuery with Draggable/Droppable behavior on Over and Out

Question

I really need your help with this one. I've been trying so hard to get this right but I just can't do it..

jsfiddle: http://jsfiddle.net/5Vyq8/13/

js-code:

$(document).ready(function () {

    // Treetable
    $("table").treetable({
        expandable: true,
        initialState: "expanded",
        expanderTemplate: "<a href='#'>&nbsp;&nbsp;&nbsp;&nbsp;</a>",
        indent: 24,
        column: 0
    });

    // Draggable
    $("table .draggable").draggable({
        opacity: .75,
        refreshPositions: true,
        revert: "invalid",
        revertDuration: 300,
        scroll: true,
        delay: 100,
        cursor: 'move'
    });

    //Droppable
    $("table tbody tr").each(function () {
        $(this).droppable({
            accept: ".draggable",
            hoverClass: "append-to-task",
            over: function (e, ui) {         

                // add class 'accept-incoming-task' to the row under after 1 second
            },
            out: function () {

            },
            drop: function (e, ui) {

                var droppedEl = ui.draggable;
                // Adds the task as the first child to dropped row
                $("table").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
            },
        });
    });
});

---

What I'm trying to achieve is this:

1. drag a row to an other row (Done!)
2. while hovering for more than 1 second it should add a class to the row under
3. When still hovering and moving on to other rows it should remove the added class in previous step

I appriciate your time and help.

Answer 1

I managed to solve this at last! Here's the solution:

$(document).ready(function () {

    // Treetable
    $("table").treetable({
        expandable: true,
        initialState: "expanded",
        expanderTemplate: "<a href='#'>&nbsp;&nbsp;&nbsp;&nbsp;</a>",
        indent: 24,
        column: 0
    });

    // Draggable
    $("table .draggable").draggable({
        opacity: .75,
        refreshPositions: true,
        revert: "invalid",
        revertDuration: 300,
        scroll: true,
        delay: 100,
        cursor: 'move'
    });

    //Droppable
    var hoverTimeout;
    $("table tbody tr").each(function () {
        var that=this;
        $(this).droppable({
            accept: ".draggable",
            hoverClass: "append-to-task",
            over: function (e, ui) { 
                clearTimeout(hoverTimeout);
                $('.accept-incoming-task').removeClass('accept-incoming-task');
                // add class 'accept-incoming-task' to the row under after 1 second
                hoverTimeout = setTimeout(function(){
                    $(that).addClass("accept-incoming-task");
                }, 1000);
            },
            out: function () {

            },
            drop: function (e, ui) {
                $('.accept-incoming-task').removeClass('accept-incoming-task');
                var droppedEl = ui.draggable;
                // Adds the task as the first child to dropped row
                $("table").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
            },
        });
    });
});

Fiddle: http://jsfiddle.net/7yEaU/2/