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

我有一套Accordion控件中包含的一组手风琴窗口（动态创建）。基本上，我想是让用户能够拖动这些手风琴面板，使代替拖放式手风琴面板？（ASP.Net）

 
A pane 
B pane 
C pane

他们可以将它拖放到是像

 
B pane 
A pane 
C pane

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

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

来源

2009-11-24 Earlz

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

来源

2009-12-07 11:05:10 Stobor

推荐使用> div。[ACCORDION PANE CLASS] – Earlz 2009-12-08 22:12:48

也许我做错了，但这个演示根本不适用于我 – 2014-09-15 13:03:18

@daveL不，你说得对 - 它看起来像是在最后一次停止工作5年... – Stobor 2014-09-16 00:11:24

这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

希望这有助于

来源

2009-12-01 14:27:07 Matt

我会离开这个问题，开放的东西希望便宜一点超过$ 1,299（我们正在开发的专有软件），这似乎。这正是我们想要的。 – Earlz 2009-12-01 14:52:23

我没有意识到有一个商业许可证费用对不起：（ - 虽然综合虽然。 – Matt 2009-12-01 15:30:32

你可以做这样的事情与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); 
    } 
});

它设置$内容到内容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

来源

2009-12-03 14:05:35 PetersenDidIt

我试过这个，它不允许我拖放手风琴窗格，以便诉诸他们。代码，它不允许拖放。我从来没有使用过jQuery，所以可能会有一些微不足道的错误，您的代码我没有看到 – Earlz 2009-12-03 14:26:37

http://jsbin.com/akoki – PetersenDidIt 2009-12-03 15:08:51

好吧，我没有包括jqueryui文件（只是jquery）无论如何，这看起来不错jQuery的目的是为了做到这一点？因为我发现一个非常糟糕的错误，你可以在其他窗格中放置窗格，以便它们消失（很容易打算也） – Earlz 2009-12-03 15:18:33

您可以使用预定义的dojo控件（开源javascript框架）（link text）并使用此控件（link text）。你也可以像我的博客（link text）一样整合dojo和asp.net。

等待您的成功

来源

2009-12-07 06:37:30

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

回答

相关问题

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