Drag-and-drop accordion panels? (ASP.Net)

Question

Hello, I have a set of accordion panes(dynamically created) contained in an Accordion control. Basically, what I am wanting is for the user to be capable of dragging these accordion panels so that instead of

A pane
B pane
C pane

They can drag and drop it to be something like

B pane
A pane
C pane

Or whatever. Also, more importantly, I would need to be able to detect that they have changed the order. Would there be a way to have it when they "drop" the pane that it can update a hidden field or something? I don't need a postback on every single drag and drop, but rather I want for when they hit a save button for the server application to detect the order in which the panes are so that it can save this order.

I would prefer to stay away from javascript libraries, but if it would be the easiest way, then I'll consider it.

Answer 1

• This widget is probably the sort of thing you are after.

You can add links to the javascript in the head

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

The markup is then just a series of divs. With a little bit of effort you should be able to tie this into the accordion control or create a user control to do your bidding

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

A preview of it is available here

Hope this helps

Answer 2

You can do something like this with 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);
    }
});

This sets $content to the content div for that header on change. And then on stop moves that content to be after the new position of the header.

HTML would be something like:

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

When your user hits the "save" button you can just call:

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

Which will give you something like:

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

Answer 3

You could use predefined dojo control (open source javascript framework)(link text) and use this control from here (link text) .You can also integrate dojo with asp.net like on my blog (link text).

Waiting for response of your success

Answer 4

Based on petersendidit's answer but without "disappearing accordion" bug...

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

and

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

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