Ho questo problema strano in cui gli elementi nel contenitore nero in basso vengono trascinati nella griglia sopra. Tuttavia gli oggetti hanno questa opacità/aspetto arancione. La struttura della cella ha un contenitore e l'elemento al suo interno. La cella contenitore ha uno sfondo arancione al passaggio del mouse, ma se sposto la cella dal contenitore nero velocemente nella griglia, così il hover non mostra che funziona perfettamente.CSS non si aggiorna correttamente dopo jQuery trascina/rilascia ma fa in Inspector
Ora l'elemento al suo interno ha una classe chiamata "show-game". Se si imposta l'opacità su questo da 1 a 0 e torna a 1 in Web Inspector ottengo l'aspetto desiderato di A1 contro A4.
C'è qualcosa che non va nel mio browser Chrome? Questo non succede in IE. Sembra che lo stile non si stia rinfrescando.
<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');
}
}
};
Sarebbe utile se mostrassi la tua jquery. – EternalHour
Quindi, quando si ispeziona l'elemento che viene visualizzato in modo errato nell'ispettore, gli stili calcolati elencati sono corretti, ma non corrispondono a quelli effettivamente presenti nella pagina? – janfoeh
Esattamente, tocco qualsiasi stile o anche sposto un'altra cella nella griglia che si aggiusta automaticamente. –