CODEWITHSUNDEEP
jqueryhtmljquery-ui-sortable
user1261774
user1261774

Reputation: 3695

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

Upvotes: 1

Views: 180

Answers (1)

madalinivascu
madalinivascu

Reputation: 32354

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/

Upvotes: 2

Related Questions