Question

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

A pane
B pane
C pane

他们可以将它拖放到像

这样的东西

B pane
A pane
C pane

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

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

Answer 1

基于petersendidit's answer，但没有“消失的手风琴”错误......

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

和

$("#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就像：

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

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

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

这会给你类似的东西：

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

Answer 3

这widget可能就是你要追求的东西。

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

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

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

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

可预览here

希望这有帮助

Answer 4

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

等待您的成功回应

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

4 个答案:

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

4 个答案:

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