jQuery可排序的connectWith多个列表 [英] jQuery sortable connectWith multiple lists

问题描述

我有两个列表，每个列表中有8个列表元素.我想将任一元素拖到任一列表中，并将两个列表的总顺序放在一起.

I have two lists with 8 list elements within each one. I would like to drag either element into either list, and get the total order of both lists together.

当前，该订单被分类为两个单独的可排序列表:

Currently the order is classed 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 it 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]

参数connectWith似乎根本不起作用，并且我无法将元素拖到其他列表中.

The parameter connectWith doesn't seem to be working at all, and I cannot drag elements 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)
        }
    });

});

我已经创建了jsFiddle

有人能提供任何建议为什么不起作用吗?

Could anyone offer any advice to why this isn't working?

推荐答案

您的问题出在li项目上的float:left上.您也需要将float:left添加到容器中(即ul )给他们一些身高

Your problem is with the float:left on the li items .. you need to add float:left to the containers too (ie the ul) to give them some height

在此处更新了jsfiddle

修复程序将您的CSS更改为

fix was changing your css to

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

更新

要获取订单，请尝试以下操作:

Update

To get the order try this :

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

注意:您应该使用 .data()在不是attr()的节点上存储/检索数据方法

Note: you should use .data() to store/retrieve data on a node not the attr() method

此处的示例

这篇关于jQuery可排序的connectWith多个列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！