jquery 可选择的交换列表项

Question

我已经看到一个关于在两个下拉列表之间交换值/项目的问题，How to swap values in select lists with jquery?

我的问题是它可以在 jquery ui-selectable 列表之间完成。您单击列表 1 中的一个元素和列表 2 中的另一个元素，然后单击交换按钮会将每个项目/ div 的内容从一个转移到另一个？

HTML：

<button>Swap Values</button>
<div style="display:inline-block">
<div id="selectable" class="mySel">
    <div value=Item1>Item1</div>
    <div value=Item2>Item2</div>
    <div value=Item3>Item3</div>
    <div value=Item4>Item4</div>
</div>

<div id="selectable2" class="mySel2">
    <div value=Item1>Item1</div>
    <div value=Item2>Item2</div>
    <div value=Item3>Item3</div>
    <div value=Item4>Item4</div>
    <div value=Item1>Item5</div>
    <div value=Item2>Item6</div>
    <div value=Item3>Item7</div>
    <div value=Item4>Item8</div>
</div>
</div>

CSS：

*{padding:6px; font-size:1.1em}

.mySel, .mySel2{
height: 300px;
width: 200px;
overflow: auto;
border: solid 2px black;
margin-bottom: 20px;
float:left;
margin:10px;
}

.mySel > DIV, .mySel2 > DIV{
height: 50px;
border: solid 1px red;
}

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable2 .ui-selecting { background: #FECA40; }
#selectable2 .ui-selected { background: #F39814; color: white; }

JQUERY 可选：

$("#selectable, #selectable2").selectable();

JQUERY 可排序：

$(".mySel, .mySel2").sortable({
    tolerance: 'pointer',
    connectWith: '.mySel, .mySel2',
    helper: 'original',
    scroll: true
});

JQUERY 交换值尝试代码：

$('button').click(function() {
    var new1 = [];

    $('.mySel, .mySel2').each(function(i) {
        new1[i] = $(this).val();
    });
    new1.reverse();
    $('.mySel, .mySel2').each(function(i) {
        $(this).val(new1[i]);
    });
});

Answer 1

这将在没有 sortable() 方法的情况下工作，它似乎会干扰 selectable() 方法。

$('button').click(function(){
   $('#selectable .ui-selected').removeClass('ui-selected').appendTo('#selectable2');
   $('#selectable2 .ui-selected').removeClass('ui-selected').appendTo('#selectable');
});

编辑：只要 sortable() 第二个运行，它将与 sortable 方法一起使用。 *编辑：回应后续问题*

其他问题

如何判断一个值为“Item1”的元素在移动之前是否已经存在于list2中？

这里有一些有趣的事情要做。首先是相反列表中的相同术语是否被交换。如果是，则交换可以继续，因为两个列表将继续只有一个值。其次，如果发现重复，则脚本不能完成交换。在交换发生之前，需要检查两组列表是否重复。

我通过结合一些复杂的 jQuery 选择器和一个单独的评估函数来解决这个问题，该函数将返回真或假，具体取决于是否存在重复项。我在下面的代码中添加了 cmets 来解释它是如何工作的。

function testFor($o, $p) { //two collections of Items we are comparing
        var retVal = true; //By default, this script returns true, a mismatched pair results in a return: false;
        $o.each(function() { //Look at each element in the first collection
            var thisDivValue = $(this).attr('value'); //Grab it's value=""
            if ($p.parent().find('div[value=' + thisDivValue + ']').not('.ui-selected').length > 0) { 
            //Search in the opposite collection for an item with a matching value that is NOT selected for swapping, if you find it, return false.
                retVal = false;
                return false;
            }
            else {return true;}
        });
        return retVal; //True or false depending on what was set above.
    }
function showError() {
    alert('DUPLICATE FOUND');
}
$("#selectable, #selectable2").selectable();
$(".mySel, .mySel2").sortable({
    tolerance: 'pointer',
    connectWith: '.mySel, .mySel2',
    helper: 'original',
    scroll: true
});
$('button').click(function() {
    var v = $('#selectable2>div');
    var w = $('#selectable>div');
    var x = $('#selectable .ui-selected');
    var y = $('#selectable2 .ui-selected');
    if ((w.length - x.length + y.length) > 4) {return false;}
    if ((v.length - y.length + x.length) > 8) {return false;}
    if (testFor(x, y) && testFor(y, x)) { //Both of these tests must return TRUE in order for the swap to happen
        $('#selectable .ui-selected').removeClass('ui-selected').appendTo('#selectable2');
        $('#selectable2 .ui-selected').removeClass('ui-selected').appendTo('#selectable');
    }
    else {showError();}
});​

jsFiddle