jquery 可排序列表 - 排序开始时收缩列表，排序停止时扩展

Question

我有一份可能有数百行长的报告，这意味着在使用 jQuery sortable 拖动报告的自定义部分时会出现滚动问题，并且用户体验不佳。

当用户想要将自定义部分向上或向下拖动到新位置时，我决定将报告的每个部分（最多可以有 30 个部分）缩小到可用的大小。

但是，我有两个问题：

1) 如何在用户排序时用一行描述报告部分的文本临时替换每个部分的内容 - 即：第 1 部分，以及；

2) 当用户停止 dragging/sorting 时，我如何 return 将已缩小的每个部分的大小恢复到原来的大小并显示实际/原始 text/data ].

我已经使用 sortstart and 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代码：

#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/

jquery 可排序列表 - 排序开始时收缩列表，排序停止时扩展

jquery sortable list - shrink list when sortstart and expand when sortstop

html

jquery

jquery-ui-sortable