jQuery UI - アコーディオン - ソート可能な問題

アコーディオンのソート可能な相互作用に問題が発生しました。 <h3>要素をドラッグして順序を変更することは可能です。私は正式なデモ（here）から関数を使用しようとしましたが、ソートは機能しません。ここでjQuery UI - アコーディオン - ソート可能な問題

CodePenは完全な例です：https://codepen.io/pprunesquallor/pen/awWREP

（私のスクリプトは、（アイコンのため、）崩壊やリサイズ他のものを含んでいますが、私はそれを構築したいと私はそれらを除外したいとは思わないでしょう。）

$(function() { 

    var icons = { 
     header: "ui-icon-circle-arrow-e", 
     activeHeader: "ui-icon-circle-arrow-s" 
    }; 

    $("#accordion").accordion({ 
     icons: icons, 
     collapsible: true, 
     heightStyle: "fill" 
    }); 

    $("#accordion-resizer").resizable({ 
     minHeight: 140, 
     minWidth: 200, 
     resize: function() { 
     $("#accordion").accordion("refresh"); 
     } 
    }); 

    $("#accordion") 
    .accordion({ 
     header: " > h3" 
    }) 
    .sortable({ 
     axis: "y", 
     handle: "h3", 
     stop: function(event, ui) { 
     ui.item.children("h3").triggerHandler("focusout"); 
     $(this).accordion("refresh"); 
     } 
    }); 

    });

私は彼の問題はので、追加<div>の内部<h3>と<p>要素を囲んでいませんでした私は、これはまた「> div>のH3に関係していると仮定しています、別のユーザーが、ここで同様の問題を発見しました"と私のHTML、しかし、私はすべての組み合わせを試して、誰も働いた...

ありがとうございます。

出典

2017-06-21 P. Prunesquallor

だけ.groupフィールドが欠落している、以下のようにあなたの項目を追加します。


 
    $(function() { 
 

 
    var icons = { 
 
     header: "ui-icon-circle-arrow-e", 
 
     activeHeader: "ui-icon-circle-arrow-s" 
 
    }; 
 

 
$("#accordion") 
 
    .accordion({ 
 
     icons: icons, 
 
     collapsible: true, 
 
     heightStyle: "fill", 
 
     header: "> div > h3" 
 
    }) 
 
    .sortable({ 
 
     axis: "y", 
 
     handle: "h3", 
 
     stop: function(event, ui) { 
 
     ui.item.children("h3").triggerHandler("focusout"); 
 
     $(this).accordion("refresh"); 
 
     } 
 
    }); 
 
    $("#accordion-resizer").resizable({ 
 
     minHeight: 140, 
 
     minWidth: 200, 
 
     resize: function() { 
 
     $("#accordion").accordion("refresh"); 
 
     } 
 
    }); 
 

 
    
 

 
    });

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<body> 
 

 
    <div id="accordion-resizer" class="ui-widget-content"> 
 
    <div id="accordion"> 
 
     <div class="group"> 
 
     <h3>I'm open by default</h3> 
 
     <div> 
 
      <p> 
 
      One 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <div class="group"> 
 
     <h3>Open me!</h3> 
 
     <div> 
 
      <p> 
 
      Two 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <div class="group"> 
 
     <h3>Open me, you won't regret it!</h3> 
 
     <div> 
 
      <p> 
 
      Three 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <div class="group"> 
 
     <h3>I'm the one you're looking for!!</h3> 
 
     <div> 
 
      <p> 
 
      JK, nothing in here 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-06-21 09:45:01

Govind、ありがとうございました！申し訳ありませんが、私はあなたが何をしたのか分かりません。あなたはjavascriptの "header："> div> h3 ""とは別のものを変更せず、htmlのクラスグループを追加しましたか？ –

はい私はこれらの変更を行ったばかりです –

ありがとうございます。 $（ "#accordion"）.accordion（{ アイコン：icons、折りたたみ可能：true、 heightStyle： "fill" }）;この部分をコードから除外しました。 - （それはもはや折りたたむことができません）理由を説明してください。私はそれを含めるとアコーデオンが壊れていることに気付きますが、私はなぜそれが含まれているのか分かりません。 –

jQuery UI - アコーディオン - ソート可能な問題

答えて

関連する問題