jQuery 拖放后 CSS 未正确更新,但在 Inspector 中更新

Posted

技术标签:

【中文标题】jQuery 拖放后 CSS 未正确更新,但在 Inspector 中更新【英文标题】:CSS not updating correctly after jQuery drag/drop but does in Inspector 【发布时间】:2015-01-17 20:20:22 【问题描述】:

我有一个奇怪的问题,即下方黑色容器中的项目被拖到上方的网格中。然而,这些物品具有这种不透明/橙色的外观。单元格的结构有一个容器和里面的项目。容器单元格在悬停时具有橙色背景,但如果我将单元格从黑色容器快速移动到网格中,则悬停不会显示它可以正常工作。

现在其中的项目有一个名为“show-game”的类。如果我在 Web Inspector 中将不透明度从 1 切换到 0 再切换回 1,我会得到 A1 与 A4 的理想外观。

我的 Chrome 浏览器有问题吗?这不会发生在 IE 中。好像样式没有刷新。

<td class="item-container draggable-item-container clearfix ui-droppable">
                            <div data-tooltip="" class="item clearfix draggable-active draggable-item show-game ui-draggable tooltip-init" style="background-color: rgb(255, 55, 108);" data-bind="draggableCss:  disabled: $data.Disabled(), matchup: $data.Matchup, invalid: $data.Invalid, current: $data.Current , draggableGameHandler :  disabled: !$data.Matchup, disabledDrop: $data.Disabled() , delegatedClick: $root.members.eventSchedule.editGame.open.bind($data, true, ($data.Matchup && $data.Matchup.Type == '@((int)ScheduleType.Pool)'), $parent.Games)">

                            </div>
                        </td>



ko.bindingHandlers.draggableCss = 
        update: function (element, valueAccessor) 

            var values = valueAccessor();

            $(element).toggleClass('ui-droppable-disabled', values.disabled);
            $(element).toggleClass('hide-game', (!values.matchup || !values.matchup.Selected()));
            $(element).toggleClass('show-game', (values.matchup && values.matchup.Selected()) ? true : false);
            $(element).toggleClass('empty', !values.matchup);
            $(element).toggleClass('expand', viewModel.showTeams());

            if (values.editable) 
                $(element).addClass('editable-game');
            

            if (values.matchup) 

                if (values.matchup.Selected()) 
                    $(element).removeClass('occupied', false);
                

                if (values.invalid && values.invalid()) 
                    updateElementColors(element, values.matchup.Color, 'invalid');
                
                else if (values.current && values.current()) 
                    updateElementColors(element, values.matchup.Color, 'current');
                
                else  
                    updateElementColor(element, values.matchup.Color, false);
                

                if (values.matchup.CrossGame)
                    $(element).addClass('cross-game');


             else if (values.invalid && values.invalid() && !values.disabled) 
                updateElementColors(element, null, 'invalid');
             else 
                $(element).removeClass('invalid').removeClass('current');
            
        
    ;

【问题讨论】:

如果你展示你的 jquery 会很有帮助。 所以当你检查在检查器中显示不正确的元素时,那里列出的计算样式是正确的,但与页面上的实际不匹配? 没错,我触摸任何样式,甚至移动网格中的另一个单元格,它都会自动修复。 @MikeFlynn 如果你创建一个小提琴会更有帮助。 我无法为此创建一个小提琴,要进行很多事情并确保安全。 【参考方案1】:

如果您使用的是 google chrome,请打开“检查”选项卡,然后打开“已计算”选项卡。您应该看到应用于此元素的所有 css 及其设置位置。

检查“隐藏”的 css 覆盖规则。

如果您想避免覆盖,请尝试 css 规则中的“!important”标签。

【讨论】:

以上是关于jQuery 拖放后 CSS 未正确更新,但在 Inspector 中更新的主要内容,如果未能解决你的问题,请参考以下文章

css / html5:拖放后悬停状态保持不变

拖放后的jQuery UI Sortable停止事件

使用jquery ui拖放后的动态div宽度

拖放后如何更新记录

拖放后向可拖放项目添加标签

如何在listview - WPF MVVM上拖放后更新codeBehind中的ObservableCollection