web-dev-qa-db-ja.com

<div>のjquery .sortable（）

ユーザーにこの種のマークアップをソートさせようとしています

<div id="steps">
   <div class="sort">
       <span></span>
       <textarea/>
   </div>
   <div class="sort">
       <span></span>
       <textarea/>
   </div>
   <div class="sort">
       <span></span>
       <textarea/>
   </div>
   <div class="sort">
       <span></span>
       <textarea/>
   </div>
</div>

そして、私はこのようにしようとしています：

$('.sort').sortable({placeholder: "ui-state-highlight",helper:'clone'}).disableSelection();

しかし、私は非常に予期しない動作をしています、チェックしてください：

http://jsfiddle.net/GA4Qs/8/

ユーザーがステップ番号でのみソートできるようにするにはどうすればよいですか？ （ただし、アイテム全体をブロックとしてソートします）

jqueryjquery-uihtmljquery-ui-sortable
33
Toni Michel Caubet

私は次のフィドルがあなたが求めているものだと信じています： http://jsfiddle.net/GA4Qs/13/

jQuery sortableは、ソートする要素を含む親要素に適用する必要があります。

$('#psP').sortable({placeholder: "ui-state-highlight",helper:'clone'});

また、適切な場所でdivを閉じなかった。

<div style="position: relative;" class="sortable">
        <span class="stepNum inset">1</span>
        <textarea placeholder="Escribe que hay que hacer en este paso" class="step valid"></textarea>
</div>

ない

<div style="position: relative;" class="sortable">
        <span class="stepNum inset">1</span>
        <textarea placeholder="Escribe que hay que hacer en este paso" class="step valid"></textarea>
<div style="position: relative;" class="sortable">
27
Leonard Garvey

ソートするアイテムのコンテナで.sortable（）を呼び出す必要がある場合、.sortをソート可能に変換します。コードが行うことは、5つの個別のソート可能なリストを作成することです。

親コンテナに基づいて選択に切り替えると、動作します：

http://jsfiddle.net/vRCp8/1/

6
Magneon

これは私のためにうまく機能しています。クラス名「nubeT」を使用するようにセレクタを変更しました

$(function() {

    $('.nubeT').sortable({
        placeholder: "ui-state-highlight",
        helper: 'clone'
    });

});​

http://jsfiddle.net/GA4Qs/11/

1
Shyju