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>