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/

Answer 2

Take a look at http://jsfiddle.net/snowMonkey/7yEaU/

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

I have your step two working. First thing you need to do is to remove the hoverClass from your hover, you'll pull it manually after the timeout delay.

Second, create a hoverTimeout var outside of this (so you can access it from both the hover and the out callbacks).

Third, in the over: callback, set the hoverTimeout to 1000ms and add the class when it triggers.

Finally, in the out callback, clear the timeout and remove the class.

This handles both the step two and three -- but it doesn't let you drop and append the dropped item to the catcher. Hope it helps!