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

Question

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

A pane
B pane
C pane

他们就可以将其拖放到类似

B pane
A pane
C pane

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

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

Answer 1

基于 petersendidit 的答案，但没有“消失的手风琴” 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>

和

$("#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 设置为更改时该标头的内容 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§ion[]=1§ion[]=3§ion[]=4

Answer 3

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

您可以在 head 中添加指向 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>

它的预览是可用的 这里

希望这有帮助

Answer 4

您可以使用预定义的 dojo 控件（开源 javascript 框架）(链接文本) 并从此处使用此控件 ( 链接文本 ）。您还可以像我的博客上那样将 dojo 与 asp.net 集成（链接文本）。

等待您成功的回复