Panneaux d'accordéon à glisser et déposer? (ASP.Net)

Question

J'ai un ensemble de panneaux d'accordéon (créés dynamiquement) contenus dans un contrôle Accordéon. Au fond, ce que je manque est pour l'utilisateur d'être capable de glisser ces panneaux d'accordéon de sorte qu'au lieu de

 
A pane 
B pane 
C pane 

Ils peuvent glisser-déposer pour quelque chose comme

 
B pane 
A pane 
C pane 

ou autre chose. De plus, plus important encore, je devrais être capable de détecter qu'ils ont changé l'ordre. Y aurait-il un moyen de l'avoir quand ils "drop" le volet qu'il peut mettre à jour un champ caché ou quelque chose? Je n'ai pas besoin d'un postback sur chaque glisser-déposer, mais je veux quand ils frappent un bouton de sauvegarde pour l'application serveur de détecter l'ordre dans lequel les volets sont afin qu'il puisse enregistrer cet ordre.

Je préférerais rester à l'écart des bibliothèques javascript, mais si ce serait le moyen le plus simple, alors je vais y réfléchir.

Answer 1

Basé sur petersendidit's answer mais sans bug « disparaissant accordéon » ...

<div id="accordion"> 
    <div id="section_1"> 
     <h3>Section 1</h3> 
     <p> 
     Body 1 
     </p> 
    </div> 
    <div id="section_2"> 
     <h3>Section 2</h3> 
     <p> 
     Body 2 
     </p> 
    </div> 
    <div id="section_3"> 
     <h3>Section 3</h3> 
     <p> 
     Body 3 
     </p> 
    </div> 
<div id="section_4"> 
     <h3>Section 4</h3> 
     <p> 
     Body 4 
     </p> 
    </div> 
</div> 

et

$("#accordion").accordion({ 
    header:'h3' 
}).sortable({ 
    items:'>div' 
}); 

Demo à: http://jsbin.com/uwago

Answer 2

• Cette widget est probablement le genre de chose que vous recherchez.

Vous pouvez ajouter des liens vers le javascript dans la tête

<link rel="stylesheet" type="text/css" href="accordion.css"> 
<script type="text/javascript" src="Ext.ux.InfoPanel.js"></script> 
<script type="text/javascript" src="Ext.ux.Accordion.js"></script> 

Le balisage est alors juste une série de divs. Avec un peu d'effort, vous devriez être en mesure de lier cela dans le contrôle d'accordéon ou de créer un contrôle utilisateur à faire vos enchères

<div id="acc-ct" style="width:200px;height:300px"> 
    <div id="panel-1"> 
    <div>My first panel</div> 
    <div> 
     <div class="text-content">My first panel content</div> 
    </div> 
    </div> 
    <div id="panel-2"> 
    <div>My second panel</div> 
    <div> 
     <div class="text-content">My second panel content</div> 
    </div> 
    </div> 
</div> 

Un aperçu est disponible here

Hope this helps

Answer 3

Vous pouvez faire quelque chose comme ça avec jQuery UI:

$("#accordion").accordion() 
.sortable({ 
    items:'>.ui-accordion-header', 
    change: function(event, ui) { 
     $content = ui.item.next(); 
    }, 
    stop: function(event, ui) { 
     ui.item.after($content); 
    } 
}); 

Ceci définit le contenu de $ à la div de contenu pour cette tête er sur le changement. Et puis à l'arrêt déplace ce contenu pour être après la nouvelle position de l'en-tête.

HTML serait quelque chose comme:

<div id="accordion"> 
    <h3 id="section_1"><a href="#">Section 1</a></h3> 
    <div> 
     <p> 
     Body 1 
     </p> 
    </div> 
    <h3 id="section_2"><a href="#">Section 2</a></h3> 
    <div> 
     <p> 
     Body 2 
     </p> 
    </div> 
    <h3 id="section_3"><a href="#">Section 3</a></h3> 
    <div> 
     <p> 
     Body 3 
     </p> 
    </div> 
    <h3 id="section_4"><a href="#">Section 4</a></h3> 
    <div> 
     <p> 
     Body 4 
     </p> 
    </div> 
</div> 

Lorsque votre utilisateur touche le bouton "Enregistrer", vous pouvez simplement appeler:

$('#accordion').sortable('serialize'); 

Ce qui vous donnera quelque chose comme:

section[]=2&section[]=1&section[]=3&section[]=4 

Answer 4

Vous pouvez utiliser le contrôle dojo prédéfini (framework javascript open source) (link text) et utiliser ce con trol d'ici (link text). Vous pouvez également intégrer dojo avec asp.net comme sur mon blog (link text).

attente de la réponse de votre succès