拖放式手風琴面板？（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）