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

问题描述

我有一组包含在手风琴控件中的手风琴窗格(动态创建的).基本上，我想要的是让用户能够拖动这些手风琴面板，而不是

<前>一个窗格B窗格C窗格

他们可以拖放它像

<前>B窗格一个窗格C窗格

什么的.此外，更重要的是，我需要能够检测到他们更改了顺序.当他们放下"可以更新隐藏字段或其他内容的窗格时，是否有办法拥有它?我不需要在每次拖放时都进行回发，而是希望当他们点击服务器应用程序的保存按钮时检测窗格的顺序，以便它可以保存此顺序.

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

解决方案

基于 petersendidit 的回答 但没有手风琴消失"错误...

<div id="section_1"><h3>第1部分</h3><p>身体 1</p>
<div id="section_2"><h3>第2部分</h3><p>身体 2</p>

<div id="section_3"><h3>第3部分</h3><p>身体 3</p>

<div id="section_4"><h3>第4部分</h3><p>身体 4</p>

和

$("#accordion").accordion({标题:'h3'}). 可排序({项目:'> div'});

演示地址:https://jsbin.com/bitiyucasa

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.

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

解决方案

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>

and

$("#accordion").accordion({
    header:'h3'
}).sortable({
    items:'>div'
});

Demo at: https://jsbin.com/bitiyucasa

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