jquery sortable list - ソートスタート時にリストを縮小し、ソート停止時に展開する

Question

長さが数百行になる可能性のあるレポートがあります。これは、カスタマイズされたセクションをドラッグすると、報告書はjQuery sortableです。

カスタマイズしたセクションを新しい位置にドラッグしたいときに、レポートの各セクション（30セクションまで）を使用可能なサイズに縮小することを決めました。

はしかし、私は2つの問題を抱えている：私は一時的に、ユーザがソートされている間、レポートセクションを記述したテキストの行で各セクションの内容を置き換えるにはどうすればよい

1） - すなわち：SECTION 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/