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(); } 
}); 

另注：現在，當您只需點擊標題，小門戶崩潰。有什麼辦法可以讓我們在拖動發生時才讓它們崩潰？

在此先感謝！

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(); } 
}); 

我添加了 '開始' 選項，並取出鼠標按下/ 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>