jQuery 可按折叠内容排序

Question

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

首先，有没有我没有想到的更好的方法？

其次，如果我继续使用此代码，有没有办法确保现在折叠的 div 即 select 捕捉并留在鼠标上？如果你现在看，当你 select a div 不是第一行时， selected 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(); }
});

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

提前致谢！

Answer 1

几件事：

我让你的元素不可选择，这样你就不会不小心突出显示它。
我将其更改为无序列表，以删除重复代码。
我将光标指向一个指针，因为这是棘手项目的标准。
为了制作动态网页，我使用了 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>

Answer 2

我想通了：

（已更新 Fiddle）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(); }
});

我向它添加了 'start' 选项并一起删除了 mousedown/mouseup 听众。

jQuery 可按折叠内容排序

jQuery Sortable with collapsed content

javascript

jquery

jquery-ui

draggable

jquery-ui-sortable