Come forzare jQuery ridimensionabile per utilizzare la percentuale?

Question

Sto cercando di utilizzare il jQuery ridimensionabile per ridimensionare il mio div, ho funzionato abbastanza bene tranne che dopo l'evento stop, l'interfaccia utente di jQuery ripristinerebbe il valoreal valore pixel.

Sono un violino a lavorare qui: http://jsfiddle.net/totszwai/j60h38fy/5/

Quando si trascina il contenitore current per la prima volta, sarebbe calcola tutto il valore in modo corretto, ma dopo l'evento stop, jQuery UI sarebbe aggiornare il% e il cambiamento torna al pixel ... quindi la prossima volta che lo trascini di nuovo, la% viene persa.

Come si forza jQuery a impostare il valore della larghezza su%? Potrei usare tecnicamente qualcosa come setTimeout, ma sarebbe troppo brutto.

E non voglio una soluzione per manipolare i div in pixel, perché potrei tecnicamente aggiungere n-div nella mia configurazione e quel codice con% dovrebbe funzionare con n-divs.

Se si dà un'occhiata ai miei neighbor div, la% è tenuto lì, solo il current preso sovrascritti. Ho anche provato a giocare con ui.element direttamente così come impostare il ui.size.width sul mio%, ma nessuno di quello funziona neanche.

Aggiornamento: Una soluzione è quella di memorizzare i dati ogni volta all'evento stop e mai verificare di nuovo al start, tuttavia, questo ancora non risolve il problema in cui stop restituisce valore di pixel errato. Vedi jsFiddle aggiornato: http://jsfiddle.net/totszwai/j60h38fy/6/

Se solo jQuery ridimensionabile prende il mio valore%, tutto avrebbe funzionato come previsto.

Risolto: Beh, ho accettato la risposta di apaul34208, poiché ho chiesto come utilizzare%. Tuttavia, per risolvere effettivamente ciò che originariamente volevo risolvere, alla fine uso pixel. Vedere la risposta che ho postato below, se quella risposta ti ha aiutato, per favore invitalo invece.

Answer 1

Mi sono imbattuto in questo stesso problema e la soluzione scelta non funziona per me perché ho bisogno di generalizzare su un numero qualsiasi di colonne. Anche la risposta di codenamezero non ha riguardato il fatto che la domanda originale richiede che vengano utilizzate percentuali per le larghezze.

Per il mio caso, utilizzare le percentuali per la larghezza è essenziale perché sto implementando un editor di tabelle e la tabella che viene salvata deve cambiare le dimensioni in modo dinamico a seconda di dove viene eseguito il rendering.

Così mi si avvicinò con questa soluzione che funziona in modo simile alla soluzione di codenamezero ma nelle fermare le larghezze modificate sono impostate per essere percentuali:
http://jsfiddle.net/genpsire/4mywcm1x/14/

$(document).ready(function() { 

    var container = $(".wrapper"); 
    var numberOfCol = 3; 
    $(".test").css('width', 100/numberOfCol +'%'); 

    var sibTotalWidth; 
    $(".test").resizable({ 
     handles: 'e', 
     start: function(event, ui){ 
      sibTotalWidth = ui.originalSize.width + ui.originalElement.next().outerWidth(); 
     }, 
     stop: function(event, ui){  
      var cellPercentWidth=100 * ui.originalElement.outerWidth()/ container.innerWidth(); 
      ui.originalElement.css('width', cellPercentWidth + '%'); 
      var nextCell = ui.originalElement.next(); 
      var nextPercentWidth=100 * nextCell.outerWidth()/container.innerWidth(); 
      nextCell.css('width', nextPercentWidth + '%'); 
     }, 
     resize: function(event, ui){ 
      ui.originalElement.next().width(sibTotalWidth - ui.size.width); 
     } 
    }); 
}); 

Scegliete questa soluzione in modo che altri non spendono la loro mattinata si tira fuori i capelli cercando di generalizzare la soluzione di apaul34208 al caso di n colonne. (come ho fatto io!)