拖动和拖放手风琴面板？ （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

他们可以拖放它是像

They can drag and drop it to be something like

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.

我想preFER远离javascript库了，但如果这将是最简单的方法，那么我会考虑的。

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

推荐答案

根据<一个href=\"http://stackoverflow.com/questions/1791103/drag-and-drop-accordion-panels-asp-net/1840044#1840044\">petersendidit's回答但没有消失手风琴的错误...

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