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

Jquery accordion drag and drop to a drop area

本文关键字：拖放 一个 区域 手风琴 Jquery      更新时间：2023-09-26

嗨，我正试图实现一个功能与jquery手风琴非常像MS Outlook手风琴功能，其中，当我最小化手风琴，有一个区域在底部的手风琴被放置，当我最大化手风琴的高度，元素被带回手风琴容器。

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

所以作为一个替代的解决方案，我想做像拖放。我想在手风琴的底部放一个div，在那里我可以放置当前的手风琴元素。我想实现的事情和已经完成的部分是:

  1. 我设置了可排序的accordion元素这样我就可以拖放到div
  2. 我已经创建了一个div，我想放/放手风琴元素，因此使其可放下
  3. 当我从手风琴容器拖到底部容器时，它应该从手风琴中删除，并将拖放的对象放入底部div，但作为图标显示给用户。
  4. 底部容器也是可排序/可拖动的，我可以把手风琴元素从底部放回顶部的手风琴元素。
  5. 当我从底部拖动到顶部时，底部将删除该元素，顶部将添加该元素。

我已经开始实现，这里是代码在JSFIDDLE自定义手风琴D& n

我面临的问题是

  • 当我放下jquery ui。元素对象如何存储在div中并显示为图标。
  • 和以上3-5点。

我不完全确定你想要什么，但这可能更接近:

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

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

在所提供的示例中，只有手风琴头被拖动，如果你点击打开面板，最终会出现奇怪的行为，因此，最好将每个节都包含在自己的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"
   }); 
});​
相关文章：