Question

您好我正在尝试用 jquery 手风琴实现一个功能，就像 MS Outlook 手风琴功能一样，当我最小化手风琴时，底部有一个区域手风琴放在哪里，当我最大化手风琴的高度时，元件被带回到手风琴容器中。

好吧，我不知道怎么做，如果有人有任何想法，请帮助我。这是第一个问题。

因此，作为一种替代解决方案，我认为这样做就像拖放一样。我想在手风琴的底部放一个div，我可以放下当前的手风琴元素。我想要实现并完成一些部分的是：

我已经将手风琴元素排序，以便我可以拖放到那个div
我已经制作了一个div，我想放置/放下手风琴元素，因此使得dropapble
当我从手风琴容器下降到底部容器时，它应该从手风琴中移除它并将掉落的物体放入底部div但显示为用户的图标。
底部容器也是可排序/可拖动的，我可以从底部到顶部的手风琴元件放回手风琴元素。
当我从下往上掉落时，底部将移除该元素，顶部将附加该元素。

我已经开始实施了，这是 JSFIDDLE Custom accordion 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

在提供的示例中，仅拖动了手风琴标题，如果你点击打开面板，这将导致奇怪的行为，因此，最好将每个部分包含在自己的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>

然后激活手风琴的可排序功能将标题更改为“＆gt; div＆gt; h3”

$(function() {

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

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

});

Jquery手风琴拖放到一个下降区域

2 个答案: