Question

我一直在努力创造一个可放置的可旋转手风琴一段时间，并没有让它变得非常敏感。当我在手风琴上拖动一个项目时，手风琴元素打开需要5秒以上（如果它完全打开）。有时我必须在手风琴元素上“挥动”拖动的元素。

我知道我在javascript中读了一些关于事件处理的事情 - 浏览器的某些内容并不总是在你认为它的时候将控制传递给javascript引擎，或类似的东西，导致奇怪的时机。

有没有其他人曾经尝试过这样做过？你有没有发现jquery / javascript这么慢？你对如何获得一个响应式可放置手风琴有任何参考（jQuery UI网站似乎没有，我在SO或谷歌上找不到任何东西）。

谢谢！

Answer 1

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

它的关键是使用dropover脚本添加的.droppable()绑定事件。但是，它并不完美，因为在调用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');
  }
 });

});

jQuery droppable手风琴

1 个答案: