jQuery的手風琴拖放到拖放區域

您好我想實現與jQuery的功能手風琴很像微軟的Outlook手風琴功能在哪裏，當我儘量減少手風琴，有在底部，其中一個區域手風琴被放置，當我最大化手風琴的高度時，元素被帶回手風琴容器。jQuery的手風琴拖放到拖放區域

嗯，我不知道該怎麼做，如果有人有任何想法，請幫助我。這是第一個問題。

所以作爲替代解決方案，我認爲這樣做就像拖放。我想在手風琴底部放置一個div，在那裏我可以放棄當前的手風琴元素。我想要實現和事情已經做了一些配件有：

我做了手風琴元素排序，這樣我可以拖放到該div
我做了一個div，我希望把/ drop the accordion elements，then made the dropapble
當我從手風琴容器放到底部容器時，它應該從手風琴中移除它，並將放下的物體放入該底部的div中，但對用戶顯示爲圖標。
底部容器也是可排序/可拖放的，我可以從底部到頂部的手風琴元素放回手風琴元素。
當我從底部到頂部放下時，底部將刪除該元素，頂部將添加該元素。

我已經開始實施，這裏是在的jsfiddleCustom accordion D&N的代碼。

我現在面臨的問題是

當我把jQuery的對象ui.element如何存儲在該分區，並顯示爲圖標。
以上3-5點。

來源

2011-11-23 Shahriar

我不是很確定你要什麼，但是這可能是有點接近：

http://jsfiddle.net/8SUbN/12/

$(function() { 

    $("#accordion").accordion().sortable({ 
     connectWith: "#dropBag" 
    }); 

    $("#dropBag").sortable({ 
     connectWith: "#accordion" 
    }); 

});

來源

2011-11-23 20:51:57 orolo

謝謝，我也很喜歡這個稍後激活手風琴的排序功能改變標題：從此移動 – Shahriar

在只提供了手風琴頭被拖動的例子，如果你點擊打開面板，這將最終變成奇怪的行爲，因此最好將每個部分放在它自己的div中。

<div class="demo"> 
<div id="accordion"> 
    <div> 
     <h3><a href="#">Section 1</a></h3> 
     <div> 
      <p> 
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
      ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
      amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
      odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
      </p> 
     </div> 
    </div> 
    <div> 
     <h3><a href="#">Section 2</a></h3> 
     <div> 
      <p> 
      Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
      purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 
      velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 
      suscipit faucibus urna. 
      </p> 
     </div> 
    </div> 
    <div> 
     <h3><a href="#">Section 3</a></h3> 
     <div> 
      <p> 
      Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
      Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero 
      ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis 
      lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
      </p> 
      <ul> 
       <li>List item one</li> 
       <li>List item two</li> 
       <li>List item three</li> 
      </ul> 
     </div> 
    </div> 
    <div> 
     <h3><a href="#">Section 4</a></h3> 
     <div> 
      <p> 
      Cras dictum. Pellentesque habitant morbi tristique senectus et netus 
      et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in 
      faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia 
      mauris vel est. 
      </p> 
      <p> 
      Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
      inceptos himenaeos. 
      </p> 
      <div id="dropBag" class="ui-widget-header" style="height:50px"> 
      </div> 
     </div> 
    </div> 
</div>

然後向「> DIV> H3」

$(function() { 

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

    $("#dropBag").sortable({ 
     connectWith: "#accordion" 
    }); 

});

來源

2012-04-06 12:26:28

jQuery的手風琴拖放到拖放區域

回答

相關問題