jQuery triable connectWith listes multiples

Question

J'ai deux listes avec 8 éléments de liste dans chacune d'elles. Je voudrais faire glisser un élément dans l'une ou l'autre liste et obtenir l'ordre total des deux listes.

Actuellement, l'ordre est classé comme deux listes triables distinctes :

[0, 1, 2, 3, 4, 5, 6, 7, 0, 1, 2, 3, 4, 5, 6, 7]

Cependant, je souhaiterais qu'il le soit (évidemment dans l'ordre des éléments) :

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

Le paramètre connectWith ne semble pas fonctionner du tout, et je ne peux pas faire glisser des éléments dans d'autres listes.

$(document).ready(function() {
    $('#list-1, #list-2').sortable({
        connectWith: '.group',
        update: function(event, ui) {
            var orders = new Array();
            $('#console').html('<b>posts[id] = pos:</b><br>');
            $('.group li').each(function(i) {
                var order = $(this).index();               
                var id = $(this).attr('data-post-id');
                orders.push(order);
            });
            console.log(orders)
        }
    });

});

J'ai créé un jsFiddle

Answer 1

Votre problème est avec le float:left sur le li articles vous devez ajouter float:left aux conteneurs également (c'est-à-dire le ul ) pour leur donner un peu de hauteur

Mise à jour de votre jsfiddle ici

La solution était de changer votre css en

ul { list-style: none; float:left;  }

Mise à jour

Pour obtenir la commande, essayez ceci :

$('.group li').each(function(i) {           
     var id = $(this).data('post-id');
     orders.push(parseInt(id.substr(id.indexOf('-')+1)));
});
console.log(orders)

Remarque : vous devez utiliser .data() pour stocker/récupérer des données sur un nœud qui n'est pas le attr() méthode

Exemple de travail ici