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的手风琴拖放到拖放区域

回答

相关问题