Question

JSFiddle：https://jsfiddle.net/bkfxjnom/4/

我无法使setTimeout与droppable.over一起正常工作。当从一个droppable移动到另一个droppable时，它似乎只是随机触发该函数。如果我退出可放置区域，然后移回另一个可放置区域，那么它似乎按预期工作。我假设在droppables之间移动时，over和out事件之间存在一些冲突。任何有关修复的帮助都表示赞赏。

var globalTimer;
$('li.category-droppable').droppable({
        tolerance: 'pointer',
        out: function (event, ui) {
            clearTimeout(globalTimer);
            if ($(this).attr('id') == 'level2') {
                $(this).find('ul:first').slideUp();
                $(this).find('span.glyphicon:first').toggleClass("glyphicon-chevron-right").toggleClass('glyphicon-chevron-down');
            }
        },
        over: function (event, ui) {
            console.log($(this).attr('id'));
            event.stopPropagation();
            $(this).find('ul:first').slideDown();
            if ($(this).attr('id') == 'level3') {
                if (!$(this).is(active)) {
                    current = $(this);
                    active.removeClass('list-group-item-info');
                    current.addClass('list-group-item-info');
                    globalTimer = setTimeout(function () {
                        current.addClass('active');
                        active.removeClass('active');
                        active = current;
                        if (showing) {
                            showing.hide()
                        }
                        load_category(current.html(), $('#' + current.attr('name')).find("ul:first"));
                        $('#' + current.attr('name')).show();
                        showing = $('#' + current.attr('name'));
                    }, 500);
                }
            } else if ($(this).attr('id') == 'level1' || $(this).attr('id') == 'level2') {
                $(this).find('span.glyphicon:first').toggleClass("glyphicon-chevron-right").toggleClass('glyphicon-chevron-down');
            }
        },
        drop: function (event, ui) {
            clearTimeout(globalTimer);
            if ($(this).attr('id') == 'level3') {
                update_category($(ui.draggable).attr('id'), $(this).html())
                $(ui.draggable).attr("style", "display: none");
                $(ui.draggable).detach().prependTo($('#' + $(this).attr('name')).children('ul'));
                $(ui.draggable).fadeIn();
                $(ui.draggable).draggable({
                    helper: 'clone',
                    appendTo: "body",
                    zIndex: 100,
                    refreshPositions: true,
                    revert: 'invalid',
                    start: function (event, ui) {
                        $(this).css('visibility','hidden');
                    },
                    stop: function (event, ui) {
                        $(this).css('visibility','visible');
                    }
                });

            }
        }
    });

Answer 1

所以，如果有人碰巧遇到同样的问题：删除clearTimeout（globalTimer）; on droppable.out提供所需的功能。

请看这里的工作小提琴：

out: function(event, ui) {
  if ($(this).attr('id') == 'level2') {
    $(this).find('ul:first').slideUp();
    $(this).find('span.glyphicon:first').toggleClass("glyphicon-chevron-right").toggleClass('glyphicon-chevron-down');

https://jsfiddle.net/bkfxjnom/5/

setTimeout和jQuery UI-Draggable / Droppable在悬停时展开列表

1 个答案: