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

Question

我在Accordion控件中包含一组手风琴窗格（动态创建）。基本上，我想要的是用户能够拖动这些手风琴面板，以便代替

窗格B窗格C窗格

他们可以将其拖放为类似

B窗格窗格C窗格

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

我希望远离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'
});

演示在https://jsbin.com/bitiyucasa

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更改为该标头的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）。您还可以像在我的博客（link text）上将dojo与asp.net集成。

等待您对成功的回应