0

デフォルトのjQueryUI接続の並べ替え可能なリストを使用しています。しかし、（私が知る限り）デフォルトの機能ではないものが必要です。私はここの誰かが私が望むことを達成する簡単な方法を知っていることを望んでいます（多分プラグインで？）。直接的な解決策は見つかりませんでした。

私が言ったように、私はデフォルトの接続ソート可能で作業しています：http: //jsfiddle.net/KLvdn/

これはすべて機能します。あるリストから別のリストにアイテムをドラッグアンドドロップできます。しかし、私が実際に望んでいるのは、あるリストからアイテムをドラッグし、別のリストの別のアイテムの上にドロップして、それらを交換できるようにすることです。

だから段階的に;

  • 左のリストから「アイテム1」をドラッグします
  • 右のリストから「アイテム3」にドロップします
  • 「アイテム1」は「アイテム3」の場所に配置されます
  • 「Item3」は「Item1」があった場所の左側のリストに移動します。

これはどういうわけかすでに可能ですか？

私の解決策

これは私が最終的にしたことです。

あるリストのアイテムを別のリストのアイテムの上にドロップする方法が必要でした。ドロップすると、その下のアイテムは自動的に他のリストに配置されます。したがって、2つのアイテムをワッピングします。

まず、接続リストに3つのプロパティを追加しました。

var _index = null;
$("#field-mylist, #test-mylist").sortable({
    connectWith: ".mylist",
    placeholder: 'ui-placeholder', // <-- VERY IMPORTANT
    change: function (event, ui) {
        markForReplacement('mylist', ui);
    },
    update: function (event, ui) {
        updateConnectedLists('mylist');
    }
}).disableSelection();

そして、change andupdateイベントによって呼び出される2つの関数：

function markForReplacement(position, ui) {
    var total = 0;
    $('#field-' + position + ' .player').each(function (index) {
        $(this).removeClass("selected-item");
        total++;
    });

    var index = ui.placeholder.index();
    if (total < (index + 2)) {
        $('#field-' + position + ' div:eq(' + (index - 1) + ')').addClass("selected-item");
        _index = (index - 1);
    } else {
        $('#field-' + position + ' div:nth-child(' + (index + 2) + ')').addClass("selected-item");
        _index = (index + 2);

    }
}

function updateConnectedLists(position) {
    if (_index === null)
        return;

    $('#field-' + position + ' div:nth-child(' + (_index) + ')').insertAfter($("#test-" + position + " .player"));
    _index = null;

    // Reset class styles
    $('#test-' + position + ' .player').each(function (index) {
        $(this).removeClass("selected-item");
    });

    $('#test-' + position).sortable('refresh');
}

追加するもう1つの重要なことは、次のCSSスタイルです。

.ui-placeholder {
    float: left;
}

.selected-item{
    border-color: #FF6600 !important;
}

ui-placeholderを使用すると、実際にアイテムを別のアイテムの上に配置できます（リリースする前に）。.selected -itemクラスは、他のリストに移動されようとしている要素（つまり、下にあるアイテム）に境界線を与えます。

4

1 に答える 1

1

オンラインデモがダウンしているようですが、このプラグインのスワップを確認できます。

免責事項私はこのプラグインを自分で試したことがありません。

SOに関するこの投稿は同じ行にあります。

これは、要素のインデックスを移動するのにも役立ちます。

于 2012-06-05T10:29:20.920 に答える