2

一定の HTML 要素を追加、削除、および DOM から並べ替える必要があるページに取り組んでいます。clone() を使用して DOM に追加するコードのすべてのブロックを含む非表示の DIV があります。sortable() は、すでに DOM にあるリスト項目では機能しますが、DOM の読み込みが完了した後に DOM に注入されたリスト項目では機能しません。例として簡略化した次のリストがあります。

<ul class="sprite-list">
    <li>
        <a href="#">
            <img src="icon.png">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="icon.png">
        </a>
    </li>
    <li class="sprite-add">
        <a href="#">Add</a>
    </li>
</ul>

次の jQuery コードを使用します。

$('ul.sprite-list').sortable({
    items: 'li:not(.sprite-add)',
    containment: 'parent',
    opacity: 0.7
}).disableSelection();

そのリストをページにハードコーディングすると、うまく機能します。しかし、同じリストを DOM に複製した後、それらをドラッグ アンド ドロップできないようです。

sortable() の実際の動作例を読んで見ました。また、人々が.sortable('refresh') の使用を推奨しているのを見ました。だから私は試しました

$('ul.sprite-list').sortable('refresh');

また

$.fn.sortable('refresh');

しかし、すべて成功しませんでした。ここで何が欠けていますか？

編集: 複製されたコードを挿入した後、リストにはすべての並べ替え可能なリストが取得するクラスui-sortableがあることに気付きました。

編集2 :関連性があるかどうかはわかりませんが、別の関数を使用して複製された要素を取得します:

function cloneElement(element){
    var container = $('#sprite-clone');

    if(element == 'generationContainer'){
        return container.find('.sprite-generation-container').clone(true);
    }
    else if(element == 'groupContainer'){
        return container.find('.sprite-group-container').clone(true);
    }
    else if(element == 'sprite'){
        return container.find('>li:first').clone(true);
    }
    else if(element == 'customForm'){
        return container.find('.customForm').clone(true);
    }
}

次に、必要なときに var generationContainer = cloneElement('generationContainer'); を使用します。それが何かに影響するかどうかはわかりません。

4

1 に答える 1

1

実例のコードはクローンを作成しませんが、新しいコンテンツを追加するので、別のことです。

残りのコードが見えないので、理論化しているだけです。修正は、sortableを呼び出すことで実行できます。したがって、ソート可能なコードを関数内に配置する場合は、ドキュメントの準備ができたときにそれを呼び出し、要素が追加されたときに再度呼び出します。

例： http： //jsfiddle.net/BWkFp/

HTML

<ul class="sprite-list">
    <li>
        test 1
    </li>
    <li>
        test 2
    </li>
    <li>
        test 3
    </li>
    <li class="sprite-add">
        <a href="#">Add</a>
    </li>
</ul>

JS

MakeUlSortable = function () {
    $('ul.sprite-list').sortable({
        items: 'li:not(.sprite-add)',
        opacity: 0.7
    }).disableSelection();
};

$(document).ready(function () {
    MakeUlSortable();
});

$('.sprite-add a').click(function () {
    $(this).before($('.sprite-list li:first-child').clone());
    MakeUlSortable();
    return false;
});

あなたが私の主張を理解することを願っています。このコードは私にとってうまく機能します:)

于 2012-08-13T20:41:40.310 に答える