jQuery 可放置手风琴

Question

一段时间以来，我一直在尝试创建一个可放置的手风琴，但还没有得到它的响应速度。当我将一个项目拖到手风琴上时，手风琴元素需要 5 多秒才能打开（如果有的话）。有时我必须在手风琴元素上“挥动”拖动的元素。

我知道我不久前读过一些关于 javascript 中的事件处理的文章 - 类似于浏览器的某些内容，当您认为它确实将控制权传递给 javascript 引擎时，或者类似的东西，会导致奇怪的时机。

以前有没有其他人尝试过这样做？你有没有发现 jquery/javascript 这么慢？您是否有任何关于如何获得响应式可放置手风琴的参考资料（jQuery UI 网站似乎没有，我在 SO 或 Google 上也没有找到任何东西）。

谢谢！

Answer 1

喂！我发布了demo，您可以在其中拖动列表项并将其放入手风琴菜单中。

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

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');
  }
 });

});