相互交换来自不同列表的两个列表类

Question

我想交换两个不同列表中的元素。因此，如果我在左侧列表和右侧列表中选择某些内容，它们需要交换。

目前看起来像这样： html:

<ul id="sortable1" class="connectedSortable">
    <li value="1" class="ui-state-default">Sort1 Item 1</li>
    <li value="2" class="ui-state-default">Sort1 Item 2</li>
    <li value="3" class="ui-state-default">Sort1 Item 3</li>
    <li value="4" class="ui-state-default">Sort1 Item 4</li>
    <li value="5" class="ui-state-default">Sort1 Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li value="1" class="ui-state-highlight">Sort2 Item 1</li>
    <li value="2" class="ui-state-highlight">Sort2 Item 2</li>
    <li value="3" class="ui-state-highlight">Sort2 Item 3</li>
    <li value="4" class="ui-state-highlight">Sort2 Item 4</li>
    <li value="5" class="ui-state-highlight">Sort2 Item 5</li>
</ul>

jquery：

var testClickSort1 ='';
var testClickSort2 ='';

$(function() {
    $("#sortable1").sortable({
        cursor: 'pointer',
        connectWith: ".connectedSortable"
    }).disableSelection();

$("#sortable2").sortable({
    cursor: 'pointer',
    connectWith: ".connectedSortable"
}).disableSelection();

$("#sortable1 li").on('click',function(){
       // $("#testClickSort1").html($(this).attr('value'));
        testClickSort1 = $(this).attr('value'); 
        test();
});

$("#sortable2 li").on('click',function(){
       // $("#testClickSort2").html($(this).attr('value'));
        testClickSort2 = $(this).attr('value');
        test();
});
});

 function test(){ 
      if ((testClickSort1 != "") && (testClickSort2 != "")) {
         alert ("test: " + testClickSort1 + '' +  testClickSort2);
         //function to swap testclicksort1 with testclicksort2
         testClickSort1 = '';
         testClickSort2 = '';
}   
}

可以在这里查看：

http://jsfiddle.net/qkCcS/26/

现在我需要知道用 testclicksort2 交换 testclicksort1 的功能是什么。

提前致谢。

你好，

沃特

Answer 1

可以这样做：

$(".connectedSortable").on('click','li', function () {
        /* make sure only one selected at a  time in a list*/
        $(this).siblings().removeClass('selected')
        $(this).toggleClass('selected');
        switchSelectedItems()
 }); 

function switchSelectedItems() {
    var $selected = $('.selected');
    /* make sure there is a pair*/
    if ($selected.length == 2) {
        $selected.each(function () {
            $(this).after($selected.not(this).clone().removeClass('selected'));
        }).remove()
    }
}

这段代码的作用是对每个选定的项目进行克隆，将其匹配后放在其他列表中，然后删除原件

DEMO