jQuery Sortable与折叠的内容

Question

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

首先，是否有一种我没有想到的更好的方法？

其次，如果我坚持使用此代码，是否有办法确保select的现在折叠的div紧贴并保持在鼠标上？ 如果现在看一下，当您不在第一行中选择一个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

我想到了：

（更新的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(); }
});

我在其中添加了“开始”选项，并一起删除了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>