jQuery UI - Akkordeon - sortierbare Ausgabe

Ich habe ein Problem mit der sortierbaren Interaktion von Akkordeon festgestellt. Es sollte möglich sein, die <h3> Elemente zu ziehen und ihre Reihenfolge zu ändern. Ich habe versucht, die Funktion aus der offiziellen Demo (here) zu verwenden, aber die Art "funktioniert" nicht.jQuery UI - Akkordeon - sortierbare Ausgabe

ist hier die CodePen für das Gesamt Beispiel: https://codepen.io/pprunesquallor/pen/awWREP

(Mein Skript tut andere Dinge enthalten (für die Symbole, kollabiert und Ändern der Größe), aber ich würde die nicht ausschließen wollen, wie ich darauf aufbauen wollen .)

$(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"); 
     } 
    }); 

    });

ich seine Frage ein ähnliches Problem hier von einem anderen Benutzer, wurde ich davon aus, das> h3 mit „> div zu tun, auch die <h3> und <p> Elementen innerhalb einer zusätzlichen <div> so hat nicht einschließe "und meine HTML, aber ich habe alle Kombinationen ausprobiert und keine funktioniert ...

Vielen Dank im Voraus.

Quelle

2017-06-21 P. Prunesquallor

einfach Ihre Artikel hinzufügen, wie unten, fehlt .Group Feld:


 
    $(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>

Quelle

2017-06-21 09:45:01

Govind, danke! Entschuldigung, aber ich verstehe nicht, was du dort gemacht hast. Du hast nichts außer "header:"> div> h3 "" im Javascript geändert und die Klassengruppe im html hinzugefügt? –

Ja, ich habe gerade diese Änderungen vorgenommen –

Vielen Dank. Ich habe bemerkt, dass Sie diesen Teil von meinem Code ausgeschlossen haben: $ ("#accordion") .accordion ({ Symbole: Symbole, zusammenklappbar: true, heightStyle: "fill" }); - (also ist es nicht mehr zusammenklappbar) Könnten Sie bitte erklären warum? Ich merke, dass es das Akkordeon bricht, wenn ich es einfüge, aber ich verstehe nicht warum ... –

jQuery UI - Akkordeon - sortierbare Ausgabe

Antwort

Verwandte Themen