jQuery 在 Over 和 Out 上具有 Draggable/Droppable 行为答案

【问题标题】：jQuery with Draggable/Droppable behavior on Over and OutjQuery 在 Over 和 Out 上具有 Draggable/Droppable 行为
【发布时间】：2013-07-31 20:25:03
【问题描述】：

我真的需要你的帮助。我一直在努力做到这一点，但我就是做不到..

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

js代码：

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

我想要实现的是：

将一行拖到另一行（完成！）
当悬停超过 1 秒时，它应该在下面的行中添加一个类
当仍然悬停并移动到其他行时，它应该删除在上一步中添加的类

感谢您的时间和帮助。

【问题讨论】：

标签： jquery html-table draggable behavior droppable

【解决方案1】：

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

我有你的第二步工作。您需要做的第一件事是从悬停中删除 hoverClass，您将在超时延迟后手动将其拉出。

其次，在此之外创建一个 hoverTimeout 变量（这样您就可以从悬停回调和 out 回调中访问它）。

第三，在over:回调中，设置hoverTimeout为1000ms，并在触发时添加类。

最后，在out回调中，清除超时并移除类。

这会处理第二步和第三步——但它不允许您将已放置的项目拖放到捕手上。希望对您有所帮助！

【讨论】：

非常感谢您的评论。但这对我来说不起作用。例如，当我拖动字母“H”并将其向上移动到字母“D”时，由于某种奇怪的原因，字母“G”得到了类名而不是字母“D”..

【解决方案2】：

我终于设法解决了这个问题！这是解决方案：

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

小提琴：http://jsfiddle.net/7yEaU/2/

【讨论】：