拖放式手风琴面板？ （ASP.Net） [英] Drag-and-drop accordion panels? (ASP.Net)

问题描述

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

I have a set of accordion panes(dynamically created) contained in an Accordion control. Basically, what I am wanting is for the user to be capable of dragging these accordion panels so that instead of

A pane
B pane
C pane

他们可以拖放它，就像

B pane
A pane
C pane

或任何。此外，更重要的是，我需要能够检测到他们已经改变了顺序。当他们放下窗格，它可以更新一个隐藏的字段或某事时，会有一种方法吗？我不需要每次拖放的回发，而是当他们点击服务器应用程序的保存按钮来检测窗格的顺序，以便可以保存此订单时，我想要。

Or whatever. Also, more importantly, I would need to be able to detect that they have changed the order. Would there be a way to have it when they "drop" the pane that it can update a hidden field or something? I don't need a postback on every single drag and drop, but rather I want for when they hit a save button for the server application to detect the order in which the panes are so that it can save this order.

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

I would prefer to stay away from javascript libraries, but if it would be the easiest way, then I'll consider it.

推荐答案

根据 petersendidit的答案，但没有消失手风琴的错误...

Based on petersendidit's answer but without "disappearing accordion" 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'
});

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

这篇关于拖放式手风琴面板？ （ASP.Net）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！