JQuery sortable connectWith multiple lists

Question

I have two lists with 8 list items in each of them. I would like to drag any item into any of them and get the general order of both lists.

Currently, the order is classified as two separate sortable lists:

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

However, I would like this to be (obviously in the order of the elements):

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

The connectWith parameter does not seem to work at all, and I cannot drag items into other lists.

 $(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) } }); }); 

I created jsFiddle

Can anyone offer any advice why this is not working?

Answer 1

Your problem is float:left in li elements. You need to add float:left to the containers (i.e. ul ) to give them height

Updated your jsfiddle

the fix changed your css to

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

Update

To get an order, try the following:

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

Note: you must use .data () to store / retrieve data using the node method not attr()

Working example here