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 sortable：

$(".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方法。 * 编辑：回复后续问题 *

其他问题

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

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

我用一些复杂的jQuery选择器和一个单独的评估函数来修复它，它会返回true或false，具体取决于是否有重复。我在下面的代码中添加了注释，解释了它的工作原理。

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

jquery可选交换列表项

1 个答案:

其他问题