2

私はknockout-sortable.jsを使用して、ユーザーがアイテムをドラッグアンドドロップして異なる順序を指定できるようにしていますが、ページに複数の「ドロップゾーン」があると問題が発生します。私はネストされたセットを持っています。それらはすべてソート可能ですが、互換性はありません。

私のコード：

    <div class="sortable" data-bind="sortable: blueprint.pages">
          <tr><td>Blabla</td></tr>
    </div>

そして他の時点で：

    <div class="sortable" data-bind="sortable: selectedPage().page_sections">
          <tr><td>Another blabla</td></tr>
    </div>

これで、「別のblabla」を「Blabla」にドラッグアンドドロップするだけで、エラーが発生します。どうすればこれを防ぐことができますか？

4

1 に答える 1

9

これを行うにはいくつかの方法があります。1つ目は、connectClassをfalseまたはnull（またはブール値として表現された場合はfalseに等しいもの）としてノックアウトソート可能に渡すことです。

<div class="sortable" data-bind="sortable: { data: blueprint.pages, connectClass: false }">
    <tr><td>Blabla</td></tr>
</div>

<div class="sortable" data-bind="sortable: { data: selectedPage().page_sections, connectClass: false }">
      <tr><td>Another blabla</td></tr>
</div>

包含オプションをjQueryに渡すこともできます。

<div class="sortable" data-bind="sortable: { data: blueprint.pages, options: { containment: 'parent' } }">
    <tr><td>Blabla</td></tr>
</div>

<div class="sortable" data-bind="sortable: { data: selectedPage().page_sections, options: { containment: 'parent' } }">
      <tr><td>Another blabla</td></tr>
</div>

これは、最初の解決策とは異なり、アイテムが視覚的にボックスから離れることを防ぎます（それがあなたの望みである場合）。

于 2012-09-13T17:21:36.943 に答える