user1261774 user1261774 - 4 months ago 10
Javascript Question

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

I have a report that can be hundreds of lines in length which means there is a scrolling issue combined with a poor user experience when it come to dragging a customized section of the report using jQuery sortable.

I decided to shrink each section (there can be as many as 30 sections) of the report down to a use-able size when the user wants to drag the customized section up or down to a new position.

However, I have two issues:

1) How do I temporarily replace the contents of each section with a line of text describing the report section while the user is sorting - i.e.: SECTION 1, and;

2) How do I return the size of each section that has been shrunk, to its former size and display the actual / original text/data, when the user stops the dragging/sorting.

I have used sortstart and sortstop to get the basic framework, but I am stuck getting any further.

Here is an example of what I have in a jsfiddle.

Here is my HTML code:

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


Here is my 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; }


Here is my jQuery / js code:

$(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

Use the following code:

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

});

alter css add the following:

html>body #sortableReportDetails li {overflow:hidden}

https://jsfiddle.net/3wtk2rej/

Comments