jQuery 可放置 Accordion

Question

我已经尝试创建一个可放置的 Accordion 有一段时间了，但还没有让它变得非常敏感。当我将一个项目拖到 Accordion 上时， Accordion 元素需要 5 秒以上的时间才能打开(如果确实打开的话)。有时我必须在 Accordion 元素上“挥动”拖动的元素。

我知道我不久前读过一些关于 javascript 中的事件处理的内容 - 浏览器并不总是在您认为会传递控制权时将控制权传递给 javascript 引擎，或者类似的东西，导致奇怪的计时。

之前有其他人尝试过这样做吗？你有没有发现 jquery/javascript 这么慢？您是否有关于如何获得响应式可放置 Accordion 的任何引用(jQuery UI 网站似乎没有，而且我在 SO 或 Google 上没有找到任何内容)。

谢谢!

Answer 1

嗨!我发布了demo您可以在其中拖动列表项并将其放入 Accordion 菜单中。

其关键是使用 .droppable() 脚本添加的 dropover 绑定(bind)事件。但是，它并不完美，因为调用 dropover 事件时仍然使用关闭的 Accordion 高度，因此 header 非常适合放置项目，但其下方的隐藏列表并不总是注册并且 Accordion 关闭。您必须返回可拖动项目并重新开始。当你搞乱演示时你就会明白我的意思。无论如何，这是基本设置:

CSS

 #droppable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ddd; color:#000; }
 #draggable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #999; color:#000; }
 .fade { opacity: 0.3; }

 ul#droppable { list-style-type: none; }
 #droppable h5 { background: #08f; color: #fff; margin: 5px 0; padding: 3px; font-size: 14px; }
 #droppable .item, .item ul li { padding: 0 5px; background: #ccc; }

HTML

<ul id="droppable">
 <li class="item selected">
  <h5>Header #1</h5>
  <ul>
   <li>Item #1.1</li>
   <li>Item #1.2</li>
  </ul>
 </li>
 <li class="item">
  <h5>Header #2</h5>
  <ul>
   <li>Item #2.1</li>
   <li>Item #2.2</li>
  </ul>
 </li>
</ul>

脚本

$(document).ready(function(){

 // make accordion
 var item = $('#droppable li.item');
 // dropover event is for droppable
 item.bind('mouseover dropover', function(){
  item.removeClass('selected');
  $(this).addClass('selected').find('ul').slideDown(300);
  item.not('.selected').find('ul').slideUp(300);
 }).not('.selected').find('ul').hide();

 // set up droppable
 item.droppable({
  drop: function(e,ui) {
   ui.draggable.appendTo($(this).find('ul'));
   ui.helper.remove();
  }
 });

 // set up draggable
 $('#draggable li').draggable({
  helper : 'clone',
  revert : true,
  start: function(e,ui){
   $(this).addClass('fade');
   ui.helper.css('background','#ddd');
  },
  stop: function(e,ui){
   $(this).removeClass('fade');
   ui.helper.css('background','transparent');
  }
 });

});