Jquery手风琴拖放到掉落区

Question

嗨，我正在尝试用jquery手风琴实现一个特性，很像MS Outlook手风琴特性，当我最小化手风琴时，在底部有一个区域放置手风琴，当我最大化手风琴的高度时，元素就被带回手风琴容器。

嗯，我不知道怎么做，如果有人知道，请帮我.This第一个问题。

因此，作为另一种解决方案，我想到了这样做，如拖放。我想在手风琴底部放一个div，在那里我可以放下当前的手风琴元素。我想实现并已经做了一些工作的事情是：

1. 我已经把手风琴元素分类了，这样我就可以拖放到那个div了。
2. 我做了一个div，我想放/放手风琴的元素，因此我做了那个流言
3. 当我从手风琴容器下降到底层容器时，它应该从手风琴中移除，并将被丢弃的对象放入该底部div，但作为图标显示给用户。
4. 在底部容器也是可排序/拖，我可以把手风琴元素从下到顶手风琴元素。
5. 当我从下到上下降时，底部将删除该元素，顶部将添加该元素。

我已经开始实现了，下面是JSFIDDLE 定制手风琴D&N中的代码。

我面临的问题是

• 当我删除jquery ui.element对象时，如何将其存储在div中并显示为图标。
• 上面的3-5点。

Answer 1

我不太清楚你想要什么，但这可能会更近一点：

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

$(function() {

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

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

});

Answer 2

在提供的示例中，只有手风琴标题被拖动，如果单击打开pannels，这将以奇怪的行为结束，因此最好将每个部分包含在它自己的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"
   }); 

});​