拖放式手风琴面板？ （ASP.Net）

我有一套Accordion控件中包含的手风琴窗格（动态创建）。 基本上，我想要的是让用户能够拖动这些手风琴面板，而不是

一个窗格
 B窗格
 C窗格

他们可以将它拖放到类似的东西

 B窗格
一个窗格
 C窗格

管他呢。 此外，更重要的是，我需要能够检测到他们已经改变了订单。 当他们“放弃”它可以更新隐藏字段或其他内容的窗格时，是否有办法获得它？ 我不需要对每一次拖放都进行回发，而是我想要在他们点击服务器应用程序的保存按钮时检测窗格的顺序以便它可以保存此顺序。

我宁愿远离javascript库，但如果它是最简单的方法，那么我会考虑它。

Answer 1

基于petersendidit的答案，但没有“消失的手风琴”的错误……

 
 
Section 1
 
 Body 1 
 
 
 
Section 2
 
 Body 2 
 
 
 
Section 3
 
 Body 3 
 
 
 
Section 4
 
 Body 4 
 
  

和

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

演示： http ： //jsbin.com/uwago

Answer 2

你可以用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); } }); 

这会将$ content设置为更改时该标头的内容div。 然后停止移动该内容将在标题的新位置之后。

HTML将类似于：

 
 
Section 1
 
 
 Body 1 
 
 
Section 2
 
 
 Body 2 
 
 
Section 3
 
 
 Body 3 
 
 
Section 4
 
 
 Body 4 
 
  

当您的用户点击“保存”按钮时，您只需拨打：

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

哪个会给你这样的东西：

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

Answer 3

• 这个小部件可能就是你想要的东西。

您可以在头部添加指向javascript的链接

标记只是一系列div。 只需稍加努力，您就可以将其与手风琴控件绑定，或创建用户控件来进行出价

  
 
 
My first panel
 
 
My first panel content
 
 
 
 
My second panel
 
 
My second panel content
 
 
  

可在此处预览

希望这可以帮助

Answer 4

你可以使用预定义的dojo控件（开源javascript框架）（ 链接文本 ）并从这里使用这个控件（ 链接文本 ）。你也可以在我的博客上链接 dojo和asp.net（ 链接文本 ）。

等待你的成功回应