$('ul').remove(); bagunça a página para o usuário

Desculpa, não entendi muito bem sua dúvida. Você pode explicar melhor?

Olá Marco Bruno, essa questão consegui resolver, mas preciso refatorar meu .js, pois acho que esta muito sujo. Pode dar uma força?

var placeholder = '<li class="span2 well placeholder tile groupLi" style="display:block;">Arraste um item aqui.</li>';
var erroSortableTxt = '<strong>Erro</strong> ao carregar os itens, atualize a página. [F5]';
var erroSortableTxtEnvio = '<strong>Erro</strong> ao salvar os itens, atualize a página. [F5]';
var arrastarItem = 'Arrastar e soltar um item para esse grupo';

$(document).ready(function(){

    sortable();

    function formatCurrency(){
        Number.prototype.format = function(n, x, s, c) {
            var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
                num = this.toFixed(Math.max(0, ~~n));
            return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
        };
    };            

    function sortable() {
            $('.panel-desc').html(arrastarItem);
            $('.loaderSortableBg').show();

            $.ajax({
            url: 'obterGrupos',
            beforeSend: function(){},
            success: function(retorno){
                var totalEss = 0;
                var totalImp = 0;
                var totalSup = 0;

                $.each(retorno, function(index, obj){

                    formatCurrency();

                    var valorFormatado = 'R$ ' + obj.valorDespesa.format(2, 3, '.', ',');
                    var text = "<li class='list-group-item bg-blue-grey-200 ui-sortable-handle' id='" + obj.id + "'>" +
                    "<i class='icon wb-move' aria-hidden='true font-size-16'></i> " + obj.descricaoDespesa + 
                    "<span class='float-right valorItem'> "  + valorFormatado + " </span></li>";

                    if(obj.grupoDespesas.nomeGrupoDespesas == "Essencial"){
                        $('ul#Essencial').append(text);
                        var idEss = $('#Essencial').children().not(".ui-sortable-helper").not(".groupLi").length;
                        $('.countEss').text(idEss);
                        var valor = obj.valorDespesa;
                        totalEss = totalEss += valor;

                    } else if(obj.grupoDespesas.nomeGrupoDespesas == "Importante"){
                        $('ul#Importante').append(text);
                        var idImp = $('#Importante').children().not(".ui-sortable-helper").not(".groupLi").length;
                        $('.countImp').text(idImp);
                        var valor = obj.valorDespesa;
                        totalImp = totalImp + valor;

                    } else {
                        $('ul#Superfluo').append(text);
                        var idSup = $('#Superfluo').children().not(".ui-sortable-helper").not(".groupLi").length;
                        $('.countSup').text(idSup);
                        var valor = obj.valorDespesa;
                        totalSup = totalSup + valor;
                    }
                });

                $('.valorEssencial').text('R$ ' + totalEss.format(2, 3, '.', ','));
                $('.valorImportante').text('R$ ' + totalImp.format(2, 3, '.', ','));
                $('.valorSuperfluo').text('R$ ' + totalSup.format(2, 3, '.', ','));
                $('.loaderSortableBg').fadeToggle();
            },
            error: function(){

                $('#erroSortabletxt').html(erroSortableTxt);
                $('#erroSortable').fadeToggle();
                setTimeout(function(){

                    $('.loaderSortableBg').fadeOut();
                    $('#erroSortable').fadeOut();

                }, 4000);
            }
        });

        $( "#Essencial, #Importante, #Superfluo" ).sortable({

            items: "li:not(.placeholder)",
            connectWith: ".connectGroup",
            cursor: 'move',
            cursorAt: { left: 20 },
            tolerance: 'pointer',
            revert: 'invalid',
            placeholder: 'span2 well placeholder tile',

            start: function(event, ui) {},
            receive: function(event, ui) {

                $('.loaderSortableBg').show();

                var urlData =  ui.sender[0].id + '/' +  this.id + '/' +  ui.item[0].id;

                $.get( "despesasNomeId/" + urlData)
                .fail(function( urlData ) {

                    $('#erroSortableTxtEnvio').html(erroSortableTxtEnvio);
                    $('#erroSortable').fadeToggle();

                    setTimeout(function(){
                        $('.loaderSortableBg').fadeOut();
                        $('#erroSortable').fadeOut();
                    }, 4000);

                })
                .always(function( urlData ) {
                });
            },

            update : function( event, ui){         
                // Atualiza os valores depois do update
                setTimeout(function(){

                    var totalEssPos = 0;
                    var totalImpPos = 0;
                    var totalSupPos = 0;
                    var elementoEss = $('#Essencial');
                    var itemEss = elementoEss.find('.valorItem');
                    var elementoImp = $('#Importante');
                    var itemImp = elementoImp.find('.valorItem');
                    var elementoSup = $('#Superfluo');
                    var itemSup = elementoSup.find('.valorItem');

                    itemEss.each(function(){
                        var valor = $(this).text();
                        var vLimpo = valor.replace('R$', '', ' ', '');
                        totalEssPos = totalEssPos += parseFloat(vLimpo);
                    });

                    itemImp.each(function(){
                        var valor = $(this).text();
                        var vLimpo = valor.replace('R$', '', ' ', '');
                        totalImpPos = totalImpPos += parseFloat(vLimpo);
                    });

                    itemSup.each(function(){
                        var valor = $(this).text();
                        var vLimpo = valor.replace('R$', '', ' ', '');;
                        totalSupPos = totalSupPos += parseFloat(vLimpo);
                    });

                    $('.valorEssencial').text('R$ ' + totalEssPos.format(2, 3, '.', ','));
                    $('.valorImportante').text('R$ ' + totalImpPos.format(2, 3, '.', ','));
                    $('.valorSuperfluo').text('R$ ' + totalSupPos.format(2, 3, '.', ','));

                    var idEss = $('#Essencial').children().not(".ui-sortable-helper").not(".groupLi").length;
                    $('.countEss').text(idEss);
                    var idImp = $('#Importante').children().not(".ui-sortable-helper").not(".groupLi").length;
                    $('.countImp').text(idImp);
                    var idSup = $('#Superfluo').children().not(".ui-sortable-helper").not(".groupLi").length;
                    $('.countSup').text(idSup);

                    // Add mensagem do placeholder
                    var detectaPlaceEss  = $('#Essencial').children();
                    var detectaPlaceEss2 = $('#Essencial').children('.placeholder');                    
                    var detectaPlaceImp  = $('#Importante').children();
                    var detectaPlaceImp2 = $('#Importante').children('.placeholder');                    
                    var detectaPlaceSup  = $('#Superfluo').children();
                    var detectaPlaceSup2 = $('#Superfluo').children('.placeholder');

                    if(detectaPlaceEss.text() != detectaPlaceEss2.text()){
                        detectaPlaceEss2.slideUp('fast');
                    }else{
                        detectaPlaceEss2.slideDown('fast');
                    }

                    if(detectaPlaceImp.text() != detectaPlaceImp2.text()){
                        detectaPlaceImp2.slideUp('fast');
                    }else{
                        detectaPlaceImp2.slideDown('fast');
                    }

                    if(detectaPlaceSup.text() != detectaPlaceSup2.text()){
                        detectaPlaceSup2.slideUp('fast');
                    }else{
                        detectaPlaceSup2.slideDown('fast');
                    }

                    if($('#Essencial').children().length == 0){
                        $('ul#Essencial').append(placeholder);

                    } else if ($('#Importante').children().length == 0){
                        $('ul#Importante').append(placeholder);

                    }else if ($('#Superfluo').children().length == 0){
                        $('ul#Superfluo').append(placeholder);
                    }
                }, 400);

                $('.loaderSortableBg').fadeToggle();
            },

        }).disableSelection();
   };
})

Posso sim. Vou dizer o que eu mudaria no código e os porquês :-)

1 - Toda vez que você faz $('selector'), esse código tem que ir até o DOM para pegar o elemento, esse é um dos processos mais lento dentro do JavaScript. Por tanto, evite fazer isso para um mesmo seletor. Por exemplo, no seu código você está fazendo isso em alguns casos, só vou mostrar um:

var idSup = $('#Superfluo').children().not(".ui-sortable-helper").not(".groupLi").length;
.....
var elementoSup = $('#Superfluo');
....
var idSup = $('#Superfluo').children().not(".ui-sortable-helper").not(".groupLi").length;
....
var detectaPlaceSup  = $('#Superfluo').children();
var detectaPlaceSup2 = $('#Superfluo').children('.placeholder');
...
$('#Superfluo').children().length == 0

A segunda chamada que você coloca o $('#Superfluo') eu puxaria ela pra cima do código e utiliza a váriavel no lugar do $('#Superfluo') , dessa forma você não precisa ficar indo do DOM 7 vezes.

2 - Código de lógica um pouco repetitivo:

$('.valorEssencial').text('R$ ' + totalEssPos.format(2, 3, '.', ','));
$('.valorImportante').text('R$ ' + totalImpPos.format(2, 3, '.', ','));
$('.valorSuperfluo').text('R$ ' + totalSupPos.format(2, 3, '.', ','));

$('.valorEssencial').text('R$ ' + totalEss.format(2, 3, '.', ','));
$('.valorImportante').text('R$ ' + totalImp.format(2, 3, '.', ','));
$('.valorSuperfluo').text('R$ ' + totalSup.format(2, 3, '.', ','));

Me parece que a lógica está repetida, apenas as varáveis mudam. Eu isolaria o código em alguma função.

Acho que é isso cara.

Muito bacana as dicas! Em dois momentos lido com o ajax nesse código, a primeira para trazer os dados e na segunda para salvar os dados, e portanto tenho que trabalhar primeiramente com o objeto e depois com os dados captando-os dos campos. Qual a possibilidade de eu poder trabalhar nos dois momentos apenas com o objeto sem ter que pegá-los nos campos no segundo momento? Pois vejo um retrabalho aqui, mas se não tiver jeito, sem problemas!

Olá, Clearman.

Está um pouco tarde, amanhã eu te respondo essa. Não estou mais conseguindo pensar.....kkkkk