0

2 つのドロップダウン リスト間で値/項目を交換する方法について、すでに尋ねられ、回答されている質問を見てきました。

私の質問は、jquery ui-selectable リストの間で実行できるかということです。リスト 1 の 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]);
    });
});
4

1 に答える 1

1

これはsortable（）メソッドなしで機能し、selectable（）メソッドに干渉するようです。

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

編集：sortable（）が2番目に実行される限り、sortableメソッドで機能します。 *編集：フォローアップの質問に応えて*

追加の質問

値が「Item1」の要素を移動する前にlist2にすでに存在するかどうかを確認するにはどうすればよいですか？

ここで解決するための楽しいビットがいくつかありました。1つ目は、反対のリストの同じ用語が交換されたかどうかです。そうである場合、両方のリストに各値が1つしかないため、スワッピングを続行できます。次に、重複が見つかった場合、スクリプトはスワッピングを完了してはなりません。スワップが発生する前に、リストの両方のセットで重複をチェックする必要がありました。

いくつかの複雑な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

于 2012-12-10T04:55:29.497 に答える