如何将不同的列表框项目拖放到一起

时间:2013-12-04 09:25:29

标签: javascript jquery jquery-ui-sortable

我有2个列表框。它彼此相邻。用户可以单独对每个列表进行排序,然后我提供了一个复选框。如果选中复选框,则项目将水平相互绑定,然后再向前绑定,如果用户从左侧列表框中选择一个元素,则右侧列表框中的相邻元素也会被选中,然后一起移动以进行重新排序(排序)。你能帮助我选择这些元素并一起移动。

1 个答案:

答案 0 :(得分:0)

我终于设法以下列方式做到了这一点。

我在两个列表中都使用了jquery-sortable。

在activate callable中,得到了原始的listitems

activate: function(event, ui){
    srcList = $('#source-container ul.sourceList li');
},
中的

stop: function(event, ui){
    $(srcList).each(function(idx, elem){
         if($(elem).equals($(ui.item)))
     orgIndex = idx;
});
$('#source-container ul.sourceList li').each(function(idx, elem){
    if($(elem).equals($(ui.item)))
        curIndex = idx;
});
$('#target-container ul.targetList li').each(function(idx, elem){
    if(idx == orgIndex){
    var toIndex = curIndex + 1;
    var fromIndex = orgIndex + 1;
    if(toIndex < fromIndex)
         $('#target-container ul.targetList li:nth-child('+fromIndex+')').insertBefore($('#target-container ul.targetList li:nth-child('+toIndex+')'));
    else
    $('#target-container ul.targetList li:nth-child('+fromIndex+')').insertAfter($('#target-container ul.targetList li:nth-child('+toIndex+')'));
}