jquery可排序列表 - 當sortstart時收縮列表，當sortstop時擴展

Question

我有一個報告可以是數百行的長度，這意味着有一個滾動問題加上不良的用戶體驗，當它拖動一個自定義的部分報告使用jQuery sortable。

當用戶想要將自定義部分向上或向下拖動到新位置時，我決定將報表的每個部分（最多可以有30個部分）縮小到可用大小。

不過，我有兩個問題：

1）如何暫時與描述報告部分，而將用戶分類一行文本替換每個部分的內容 - 即：第1節，和;

2）當用戶停止拖動/排序時，如何將縮小的每個部分的大小恢復爲原來的大小並顯示實際/原始文本/數據。

我已經使用sortstart和sortstop來獲得基本框架，但我堅持得到更多。

這是我在jsfiddle中的一個例子。

這裏是我的HTML代碼：

<ul id="sortableReportDetails" class="noselect"> 
    <li class="ui-state-default">Section 1 <br />Section 1 <br />Section 1 <br />Section 1 <br /></li> 
    <li class="ui-state-default">Section 2</li> 
    <li class="ui-state-default">Section 3<br />Section 3<br />Section 3<br />Section 3<br />Section 3<br />Section 3<br />Section 3<br />Section 3<br />Section 3<br /></li> 
    <li class="ui-state-default">Section 4<br />Section 4<br />Section 4<br />Section 4<br /></li> 
    <li class="ui-state-default">Section 5<br />Section 5<br />Section 5<br /></li> 
    <li class="ui-state-default">Section 6<br />Section 6<br />Section 6<br />Section 6<br />Section 6<br />Section 6<br />Section 6<br />Section 6<br />Section 6<br />Section 6<br />Section 6<br />Section 6<br />Section 6<br /></li> 
    <li class="ui-state-default">Section 7</li> 
</ul> 

這裏是我的CSS codde：

#sortableReportDetails { list-style-type: none; margin: 0; padding: 0; border: 1px solid yellowgreen; background: violet !important; } 
#sortableReportDetails li { border: 1px dotted darkred; background: limegreen; cursor: pointer; cursor: hand; } 
html>body #sortableReportDetails li { } 
.ui-state-highlight { height: 5em; margin-bottom: 5px; margin-top: 5px; border: 1px dashed hotpink; background: royalblue !important; text-align: center; color: blueviolet; } 
.ui-sortable-helper { display: none; border: 1px dashed yellowgreen; background: darkorange !important; color: aquamarine; } 
.ui-state-default:hover li { border: 1px dashed beige; background: darkseagreen; cursor: pointer; cursor: hand; } 
.sortable_message { color: crimson; text-align: center; vertical-align: middle; } 

這裏是我的jQuery/js代碼：

$(function() { 
    // settings: https://api.jqueryui.com/sortable/ 
    $("#sortableReportDetails").sortable({ 
    containment: "parent", 
    cursor: "n-resize", 
    opacity: "0.4", 
    placeholder: "ui-state-highlight", 
    scrollSpeed: 20 // The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance. 
    }); 
    $("#sortableReportDetails").disableSelection(); 

    $('#sortableReportDetails').on('sortstart', function(event, ui) { 
    $('.ui-state-highlight').append('<span class="sortable_message">Move Details Here</span>'); 
    $('#sortableReportDetails li').height(15); 
    }); 

    $('#sortableReportDetails').on('sortstop', function(event, ui) { 
    $('#sortableReportDetails li').height(80); 
    }); 
}); 

Answer 1

使用下面的代碼：

$(function() { 
    // settings: https://api.jqueryui.com/sortable/ 
    $("#sortableReportDetails").sortable({ 
     containment: "parent", 
     cursor: "n-resize", 
     delay: 100, // milliseconds (1k milliseconds = 1 sec) 
     //distance: 2, 
     opacity: "0.4", 
     placeholder: "ui-state-highlight", 
     //scrollSensitivity: 4, // Defines how near the mouse must be to an edge to start scrolling. 
     scrollSpeed: 1 // The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance. 
    }); 
    $("#sortableReportDetails").disableSelection(); 
    $('#sortableReportDetails').on('mousedown',function(){ 
     $('.ui-state-default').height(15); 
    }); 
    $('#sortableReportDetails').on('mouseup',function(){ 
     console.log('up'); 
     $('.ui-state-default').css('height','auto'); 
    }); 
}); 

改變CSS添加以下內容：

html>body #sortableReportDetails li { overflow:hidden } 

https://jsfiddle.net/3wtk2rej/