Question

我正在使用jquery-ui sortable，我的想法是对滚动时出现的项目应用排序。我正在使用以下代码：

  var gridTop = 0,
        gridBottom = container.outerHeight();
   $('#play-list').on('scroll', function () {
        $('#play-list li:not(.selectableHide):not(.sorting-initialize)').each(function () {
            var thisTop = $(this).offset().top;
            if (thisTop >= gridTop && (thisTop + $(this).height()) <= gridBottom) {
                if ($(this).attr('data-hour') != houseScope) {
                    houseScope= $(this).attr('data-hour');
                    console.log(houseScope);
                }
                $(this).addClass("sorting-initialize");
                var waitInterval = setInterval(() => {
                    timeout += timeout;
                    if (timeout == 300) {
                        clearInterval(waitInterval);
                        $('#play-list .sortable').sortable('refresh');
                        timeout = 10;
                    }
                }, timeout);
            }
        });
    });

我添加了一个日志，以在滚动时检查我当前在播放列表中的小时。仅滚动时一切正常，但是当我拖动一个元素并拖动它同时滚动时，我可以看到小时仍然正确更改，但是未添加“ sorting-initialize”。

编辑：经过进一步调试后，我现在看到的问题不是不是未添加类，而是拖动时未更新DOM。我可以在Chrome的控制台（检查元素处于打开状态）中看到正在添加该类，但是DOM在其先前状态下处于“冻结”状态，直到拖动结束为止，因此无法将元素拖放到新的可排序元素上。有什么解决办法吗？

谢谢

Answer 1

jQuery与加载的DOM一起使用。如果要对动态数据使用“打开”事件，则必须将其锚定到现有DOM元素上。

尝试使用

$('body').on('scroll', '#play-list', function () {...

您可以使用“＃play-list” div的父容器ID更改“ body”标签

jQuery拖动时更新DOM

1 个答案: