带有折叠内容的 jQuery 可排序

Question

我想对所有用户使用 jQuery 可排序功能来排列框。很简单。然而，这些盒子可能会变得非常高，所以当他们点击手柄进行排序时，我希望所有的盒子都折叠起来。我得到了一些工作（如下所示）。当您尝试对第一行进行排序时，一切正常。但是任何低于它的东西都会变得有点奇怪。

首先，有没有我没想到的更好的方法来做到这一点？

其次，如果我继续使用这段代码，有没有办法确保现在折叠的 div 是 select 捕捉到并留在鼠标上？如果你现在看，当你选择一个不是从第一行开始的 div 时，被选中的 div 比鼠标所在的位置高很多（因为折叠了）。

jsFiddle：http://jsfiddle.net/cwv9usqf/5/

$('.header').mousedown(function(){ $('.content').hide(); })

$('.container').sortable({
  connectWith: '.container',
  items: '.portlet',
  handle: '.header',
  tolerance: 'pointer',
  stop: function(){ $('.content').show(); }
});

另一个注意事项：现在只要单击标题，portlet 就会崩溃。有没有办法只能在拖动发生时让它们崩溃？

提前致谢！

Answer 1

我想通了：

（更新小提琴）http://jsfiddle.net/cwv9usqf/6/

$('.container').sortable({
  connectWith: '.container',
  items: '.portlet',
  handle: '.header',
  tolerance: 'pointer',
  revert: true,
  placeholder: 'placeholder',
  start: function(){ $('.content').hide(); },
  stop: function(){ $('.content').show(); }
});

我为其添加了“开始”选项，并一起删除了 mousedown/mouseup 侦听器。

Answer 2

几件事：

1. 我让您的元素无法选择，这样您就不会意外突出显示它。
2. 我将其更改为无序列表，以删除重复代码。
3. 我将光标指向一个指针，因为这对于难以处理的项目来说是相当标准的。
4. 为了制作动态网页，我使用了 flex 而不是 px 值。

$("#sortable").sortable({
  revert: true
});

#sortable { 
  width: 100%; 
  list-style-type:none;
  display: flex;
  justify-content: space-between;
  -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  -o-user-select: none;
  user-select: none;
}

#sortable > li {
  float: left;
  cursor: pointer;
  padding: 0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="demo">
    <div>
        <ul id="sortable">
          <li>Home</li>
          <li>Contact Us</li>
          <li>About</li>
        </ul>
    </div>
</div>