0

ドラッグ可能なものの巨大なリストを操作する際のパフォーマンスを改善しようとして、この問題に遭遇しました。親コンテナーを削除して、アイテムのバッチ処理が高速になるように (各処理で DOM の更新が発生しないようにするため)、後でコンテナーを再挿入すると、ドラッグ可能オブジェクトが機能しなくなりました。例えば

<div id="listParent">
<div id="listWrapper">
    <ul id="draggableList">
       <li class="draggable">Item 1</li>
       <li class="draggable">Item 2</li>
       <li class="draggable">Item 3</li>
       <li class="draggable">Item 4</li>
       <li class="draggable">Item 5</li>
       <!-- many more items here -->
    </ul>
</div>
</div>
<script type="text/javascript">
$(function() {
   $( ".draggable" ).draggable({
      revert: true
   });

   function filterItems(text) {
      var p = $('#listWrapper').remove();

      // for each <LI> element, hide the ones who do not match `text`'s value

      p.appendTo('#listParent');
   }
   // ...
});
</script>

したがって、たとえば を呼び出すfilterItems('foo');と、アイテムがドラッグ可能ではなくなります。<LI>要素にドラッグ可能を再度適用する必要がありますか? もしそうなら、とにかく後で何かを再適用しなければならない場合、プロセスをスピードアップするために親を削除する意味はありませんか?

4

1 に答える 1

3

.detach()の代わりに使用して、.remove()添付されたイベント ハンドラーを保持します。これはドキュメントからの抜粋です。

.remove() メソッドは、要素を DOM から取り出します。要素自体とその中のすべてを削除する場合は、.remove() を使用します。要素自体に加えて、要素に関連付けられたすべてのバインドされたイベントと jQuery データが削除されます。データとイベントを削除せずに要素を削除するには、代わりに .detach() を使用します。

鉱山を強調します。

ここにフィドルがあります。

于 2012-05-21T17:25:55.793 に答える