jquery UI triable avec table et largeur tr

J'utilise jQuery UI triable pour rendre ma grille de table triable. Le code semble fonctionner correctement, mais comme je n'ajoute pas de largeur à tds, lorsque je fais glisser le, tril réduit le contenu.

Par exemple; si ma ligne de tableau est de 500 pixels lorsque je commence à faire glisser, elle devient 300 pixels. Je suppose que cela se produit car aucune largeur n'est définie dans la grille. C'est parce que j'utilise deux classes pour le tds ( fixet liquid).

La fixclasse rend tdégal à la largeur du contenu et liquidrend la tdlargeur à 100%. C'est mon approche pour la table de grille sans avoir à attribuer une largeur à tds.

Une idée comment rendre le travail triable avec mon approche?

J'ai trouvé la réponse ici .

Je l'ai légèrement modifié pour cloner la ligne, au lieu d'ajouter des largeurs à l'original:

  helper: function(e, tr)
  {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  },

Je pense que cela peut aider:

.ui-sortable-helper {
    display: table;
}

La réponse choisie ici est une très bonne solution, mais elle a un bug grave qui est apparent dans le violon JS original ( http://jsfiddle.net/bgrins/tzYbU/ ): essayez de faire glisser la ligne la plus longue ( God Bless You, Mr . Rosewater ), et le reste de la largeur des cellules s'effondre.

Cela signifie que la fixation des largeurs de cellule sur la cellule déplacée n'est pas suffisante - vous devez également fixer les largeurs sur le tableau.

$(function () {
    $('td, th', '#sortFixed').each(function () {
        var cell = $(this);
        cell.width(cell.width());
    });

    $('#sortFixed tbody').sortable().disableSelection();
});

JS Fiddle: http://jsfiddle.net/rp4fV/3/

Cela résout le problème de la réduction du tableau après avoir fait glisser la première colonne, mais en introduit une nouvelle: si vous modifiez le contenu du tableau, les tailles de cellule sont maintenant fixées.

Pour contourner ce problème lors de l'ajout ou de la modification de contenu, vous devez effacer les largeurs définies:

$('td, th', '#sortFixed').each(function () {
    var cell = $(this);
    cell.css('width','');
});

Ajoutez ensuite votre contenu, puis corrigez à nouveau les largeurs.

Ce n'est toujours pas une solution complète, car (en particulier avec une table) vous avez besoin d'un espace réservé de dépôt. Pour cela, nous devons ajouter une fonction au démarrage qui construit l'espace réservé:

$('#sortFixed tbody').sortable({
    items: '> tr',
    forcePlaceholderSize: true,
    placeholder:'must-have-class',
    start: function (event, ui) {
        // Build a placeholder cell that spans all the cells in the row
        var cellCount = 0;
        $('td, th', ui.helper).each(function () {
            // For each TD or TH try and get it's colspan attribute, and add that or 1 to the total
            var colspan = 1;
            var colspanAttr = $(this).attr('colspan');
            if (colspanAttr > 1) {
                colspan = colspanAttr;
            }
            cellCount += colspan;
        });

        // Add the placeholder UI - note that this is the item's content, so TD rather than TR
        ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
    }
}).disableSelection();

JS Fiddle: http://jsfiddle.net/rp4fV/4/

Il semble que le clonage de la ligne ne fonctionne pas bien sur IE8, mais la solution d'origine fonctionne.

Testé avec le jsFiddle .

Appelez ce code suivant lorsque votre table est prête à être triée, cela garantira que vos éléments td ont une structure de table fixe avec sans rupture.

 $(".tableToSort td").each(function () {
            $(this).css("width", $(this).width());
        });  

jsFiddle

Après de nombreuses tentatives, j'ai juste essayé une solution simple qui complète la solution de Dave James Miller pour éviter que la table ne rétrécisse en faisant glisser la plus grande ligne. J'espère que cela aidera :)

// Make sure the placeholder has the same with as the orignal
var start = function(e, ui) {
    let $originals = ui.helper.children();
    ui.placeholder.children().each(function (index) {
        $(this).width($originals.eq(index).width());
    });
}
// Return a helper with preserved width of cells
var helper = function(e, tr) {
    let $helper = tr.clone();
    let $originals = tr.children();
    $helper.children().each(function (index) {
        $(this).width($originals.eq(index).outerWidth(true));
    });
    return $helper;
};

La solution de Keith est bonne mais a produit un peu de ravages dans Firefox qui n'a pas additionné les colspans mais les a signalés. (L'ancienne douleur de type string js dans le genou)

en remplaçant cette ligne:

 cellCount += colspan;

avec:

 cellCount += colspan-0;

Résout le problème. (Comme js est obligé de traiter les variables comme des nombres au lieu de chaînes)

La réponse de Dave James Miller a fonctionné pour moi, mais en raison de la disposition des divs de conteneur sur ma page, l'assistant qui traîne avec le curseur de la souris est décalé de la position de ma souris. Pour résoudre ce problème, j'ai ajouté ce qui suit au rappel de l'aide

$(document.body).append($helper);

Voici le rappel complet avec la ligne ci-dessus ajoutée:

helper: function (e, tr) {
  var $originals = tr.children();
  var $helper = tr.clone();
  $helper.children().each(function (index) {
    // Set helper cell sizes to match the original sizes
    $(this).width($originals.eq(index).width());
  });

  // append it to the body to avoid offset dragging
  $(document.body).append($helper);

  return $helper;
}

J'aurais ajouté ceci en commentaire à la réponse de Dave, mais je n'avais pas assez de représentants sur ce compte.

Il semble que disableSelection()- la méthode est mauvaise et obsolète de nos jours. Je ne peux plus utiliser d'entrées de texte dans une ligne triable dans Mozilla Firefox 35.0. Ce n'est tout simplement plus focalisable.

$(function() {
    $( "#sort tbody" ).sortable({
        update: function () {
                                var order = $(this).sortable("toArray").join();
                                $.cookie("sortableOrder", order);
                        }
    });
    if($.cookie("sortableOrder")){
        var order = $.cookie("sortableOrder").split(",");
        reorder(order, $("#sort tbody"));
    }
    function reorder(aryOrder, element){
      $.each(aryOrder, function(key, val){
              element.append($("#"+val));
      });
    }
  });

.sortable({
    helper: function (e, ui) {
        ui.children().each(function () {
            $(this).width($(this).width());
        });
        return ui;
    }
});

Appliquez le triable à l'élément tbody de la table et définissez simplement l'assistant sur `` clone '', comme décrit dans l' API de jquery-ui

$("$my-table-tbody").sortable({
    helper: "clone"
});