1

jquery Draggable and sortable を使用して、学生が複数の回答 (赤いボックス) で質問 (青いボックス) に回答し、回答を並べ替えることができるシステムを作成したいと考えています。青いボックスの数は不明であるため、「コンテナ」という名前のクラスを作成しました。

私はそれを設定してjsfiddleに配置しました：http://jsfiddle.net/smethorst/h3ZNd/2/

HTML

<ul id="answers">
  <li>Item 1 (+)</li>
  <li>Item 2 (+)</li>
  <li>Item 3 (+)</li>
  <li>Item 4 (+)</li>
</ul>

<ul class="container">
</ul>
<ul class="container">
</ul>

JQuery $(関数() {

    $("#answers li").draggable({
      connectToSortable: '.container',
      helper: 'clone',
      revertDuration: 0
    });

    $(".container").sortable({
      revert: true
    });

    $(".container li").draggable({
      connectToSortable: '.container',
      revert: "invalid",
    });
});

私はjsfiddleにソリューションを配置しました: http://jsfiddle.net/smethorst/h3ZNd/2/

したがって、問題は、回答を別の質問ボックスにドラッグ アンド ドロップできないことです。そのため、アイテムを赤いボックスから青いボックスにドラッグした後、別の青いボックス (クローンなし) にドラッグできるはずです。

ドロップ後に次のようなさまざまなことを試しましたが、うまくいきませんでした:

$(this).append($(ui.draggable));
$(".container").sortable('refresh');

それに対する解決策はありますか？前もって感謝します。

4

1 に答える 1

1

とても簡単です。 sortable には次のオプションがありますconnectWith。他の sortable を接続するためのセレクターを受け入れます。

$(".container").sortable({
    connectWith: '.container',
    revert: true
});

JSFiddle

次の問題は、すべてのボックスが 1 つの要素のみを受け入れる必要があることです。そのため、要素のドロップ時にソート可能な他の要素を動的に削除する必要がありますが、これは私が思っていたよりもトリッキーです。

于 2013-07-28T10:37:49.520 に答える