1

複数をドラッグ/ドロップした後、すべてのdivが押されたときに元の状態と位置に戻るようにキャンセルするオプションが必要です。

HTML:

<div class="connected">
    <div class="myDivs">Hello 01</div>
    <div class="myDivs">Hello 02</div>
    <div class="myDivs excludeThisCss">Hello 03</div>
    <div class="myDivs">Hello 04</div>
    <div class="myDivs">Hello 05</div>
    <div class="myDivs excludeThisCss">Hello 06</div>
    <div class="myDivs">Hello 07</div>
    <div class="myDivs">Hello 08</div>
    <div class="myDivs excludeThisCss">Hello 09</div>
    <div class="myDivs">Hello 10</div>
</div>
<button id="demo1" onclick="cancel()" title="Button">Cancel</button>

JavaScript:

$(function() {
    $(".connected").sortable({
        connectWith: ".connected",
        items: ".myDivs:not(.excludeThisCss)"
    }).disableSelection();
});

function cancel() {
    // alert('cancelled');
}​

フィドルを参照してください：http://jsfiddle.net/adrianjsfiddlenetuser/zyUkd/6/

.load 関数の使用例を見てきましたが、新しいデータをロードするのではなく、div を更新するだけです

4

4 に答える 4

3

別のより軽量なソリューションがあります。

dataまず、DOM の準備ができたら、各要素の初期インデックスを保存しましょう。

$(".connected").sortable({
    ...
}).children().each(function(index) {
    $(this).data("index", index);
});

次に、キャンセル時に、次のように格納されたインデックスに基づいて要素の位置を復元しましょう。

function cancel() {
    var indices = [];
    $(".connected").children().each(function() {
        indices.push($(this).data("index"));
    }).each(function(index) {
        var el = $(".connected").children().eq(indices[index]);
        if (!el.is(this)) el.before(this);
    });
}​

デモ: http://jsfiddle.net/zyUkd/13/

于 2012-05-28T14:41:20.687 に答える
1

コンテナ内の要素を変数内に配置し、「キャンセル」を押したときに変数データを含むコンテナを削除/ロードすることで、これを解決できました。事前に変数に保存している場合は、元のリスト位置にリセットされます。

http://jsfiddle.net/zyUkd/12/

于 2012-05-28T14:11:22.923 に答える
1

古き良き方法は次のとおりです。

要素を最初の順序で格納するグローバル var を宣言します。var def;

あなたの$(document).ready()、つまり では$(function(){})、要素を最初の順序で保存します。

def = $('.connected').html();

最後に、cancel()関数で、要素を最初の順序に戻します。

$('.connected').html(def);

JSFiddle

これはわずか 3 行のコードであり、いくつかの DOM 要素を格納するためにメモリをあまり消費しないはずです。

要素を var にバックアップ$('.connected')し、ドキュメントから現在の要素を削除し、元の要素を var からページの body/container div に追加することもできます。

API documentationを見ると、.sortable("destroy")メソッドはソート可能なアイテムを最初の順序に戻す必要がありますが、あなたの例で試したところ、destroy メソッドは機能しませんでした。

于 2012-05-28T14:22:36.823 に答える
0

初期コンテナを.data()key で要素のコレクションに保存し"initial-container"、元に戻して、.detach()それ.append()を に保存することをお勧めします.data("initial-container")。

于 2012-05-28T14:08:14.063 に答える