拖放手風琴面板？ (ASP.NET)

Question

我有一組包含在手風琴控件中的手風琴窗格（動態創建的）。 基本上，我想要的是讓用戶能夠拖動這些手風琴面板，而不是

A pane
B pane
C pane

他們可以拖放它像

B pane
A pane
C pane

或者隨便。 此外，更重要的是，我需要能夠檢測到他們更改了順序。 當他們“放下”可以更新隱藏字段或其他內容的窗格時，是否有辦法擁有它？ 我不需要在每次拖放時都進行回發，而是希望當他們點擊服務器應用程序的保存按鈕時，檢測窗格的順序，以便它可以保存此順序。

我寧願遠離 javascript 庫，但如果這是最簡單的方法，那么我會考慮它。

Answer 1

基於petersendidit 的回答，但沒有“消失的手風琴”錯誤......

<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&section[]=1&section[]=3&section[]=4

Answer 3

• 這個小部件可能是你所追求的那種東西。

您可以在頭部添加指向 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 集成。

等待您成功的回應