2

Hello guys,

Im using Touch-enabled Drag'n'drop Table Sorter plugin https://www.jqueryscript.net/table/touch-table-row-sorter.html

to drag table rows up and down.

My problem is page is not scrolling on dragging "Record 1" column below "Record 9".

HTML:

<table id="table3">
 <thead>
     <tr>
         <th colspan="3">handler: "span.sort-handler"</th>
     </tr>
 </thead>
 <tbody>
     <tr>
         <td>Row 1</td>
         <td>Record 1 <span class="sort-handler"></span></td>
         <td>Record 1</td>
     </tr>
     <tr>
         <td>Row 2</td>
         <td>Record 2 <span class="sort-handler"></span></td>
         <td>Record 2</td>
     </tr>
     <tr>
         <td>Row 3</td>
         <td>Record 3 <span class="sort-handler"></span></td>
         <td>Recrod 3</td>
     </tr>
     <tr>
         <td>Row 4</td>
         <td>Record 4 <span class="sort-handler"></span></td>
         <td>Record 4</td>
     </tr>
     <tr>
         <td>Row 5</td>
         <td>Record 5 <span class="sort-handler"></span></td>
         <td>Record 5</td>
     </tr>
      <tr>
         <td>Row 6</td>
         <td>Record 6 <span class="sort-handler"></span></td>
         <td>Record 6</td>
     </tr>
  <tr>
         <td>Row 7</td>
         <td>Record 7 <span class="sort-handler"></span></td>
         <td>Record 7</td>
     </tr>
     <tr>
         <td>Row 8</td>
         <td>Record 8 <span class="sort-handler"></span></td>
         <td>Record 8</td>
     </tr>
 </tbody>
 <tfoot>5
     <tr>
         <td colspan="3">&nbsp;</td>
     </tr>
 </tfoot>
</table>
</div>

JQUERY:

RowSorter("#table3", {
    handler: 'span.sort-handler' 
});

Please check this JSFiddle link https://jsfiddle.net/ayyanarpms/7sagcu0j/4/

What i need is this https://jqueryui.com/resources/demos/draggable/scroll.html

ayyanar pms
  • 169
  • 1
  • 2
  • 13

3 Answers3

1

If you add class="sort-handler" to td then it's working fine. see below code and snippet.

RowSorter("#table3", {
    handler: 'td.sort-handler',
    onDrop: function(tbody, row, new_index, old_index) {
        var table = tbody.nodeName === 'TBODY' ? tbody.parentNode : tbody;
        table.querySelectorAll('tfoot td')[0].innerHTML = (old_index + 1) + '. row moved to ' + (new_index + 1);
    }
});
<style>
    table {float: left; margin: 20px; font-size: 14px; font-family: tahoma, arial, sans-serif;}
   table.sorting-table {cursor: ns-resize; box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);}
    table thead th {background-color: #ccc; padding: 5px 8px;}
    table td {background-color: #ddd; padding: 5px 8px;}
    table tr.sorting-row td {background-color: #8b8;}
    table td.sorter {background-color: #f80; width: 10px; cursor: ns-resize;}
    /* .sort-handler {float: right; background-color: #f80; width: 14px; height: 14px; margin: 2px 0 0 6px; cursor: ns-resize;} */

    table.sorting-table tbody tr:not(.sorting-row) td {opacity: 0.2;}

    /* some styling for table1 */
    table#table1 tr.sorting-row td {background-color: #ccc;}
    table#table1.sorting-table {cursor: ns-resize; box-shadow: none; outline: 1px solid #333;}
    table#table1.sorting-table tbody tr:not(.sorting-row) td {opacity: 1; color: #bbb; text-shadow: 0 1px 0 rgba(255, 255, 255, 1);}
</style>
<script src="https://www.jqueryscript.net/demo/touch-table-row-sorter/RowSorter.js"></script>
<div id='sortable' style='height:200px;overflow-y:scroll'>
<table id="table3">
    <thead>
        <tr>
            <th colspan="3">handler: "span.sort-handler"</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="sort-handler">Row 1</td>
            <td>Record 1</td>
            <td>Record 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td class="sort-handler">Record 2</td>
            <td>Record 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td class="sort-handler">Record 3</td>
            <td>Recrod 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td class="sort-handler">Record 4</td>
            <td>Record 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td class="sort-handler">Record 5</td>
            <td>Record 5</td>
        </tr>
         <tr>
            <td>Row 6</td>
            <td class="sort-handler">Record 6</td>
            <td>Record 6</td>
        </tr>
     <tr>
            <td>Row 7</td>
            <td class="sort-handler">Record 7</td>
            <td>Record 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td class="sort-handler">Record 8</td>
            <td>Record 8</td>
        </tr>
    </tbody>
    <tfoot>5
        <tr>
            <td colspan="3">&nbsp;</td>
        </tr>
    </tfoot>
</table>
</div>
Bhautik
  • 11,125
  • 3
  • 16
  • 38
  • in your snippet , i cannot drag Row 1 and put it below Row 8 at a stretch, on dragging td scroll not working, what i need is on dragging td page should automatically scroll with drag content so that i can put tr anywhere – ayyanar pms Mar 24 '21 at 06:47
  • I think you can do it by when you start to drag scroll with mouse middle scroll button. – Bhautik Mar 24 '21 at 06:54
  • what i need is this https://jqueryui.com/resources/demos/draggable/scroll.html – ayyanar pms Mar 24 '21 at 06:56
0

Try like below. Add event listener for mouse move on dragStart and remove it on drop.

Get closest parent with scroll for table & Get viewport height.

Inside move function which is event listener function, check for viewport height and current mouse's Y difference is less than 30 then scroll parent.

Also check scrollable parent's page offset height and mouse's PageY difference is less than 30 then scroll parent.

RowSorter("#table3", {
  handler: 'span.sort-handler',
  onDrop: function(tbody, row, new_index, old_index) {
    // remove event handler which is used to scroll
    window.removeEventListener('mousemove', move);
    var table = tbody.nodeName === 'TBODY' ? tbody.parentNode : tbody;
    table.querySelectorAll('tfoot td')[0].innerHTML = (old_index + 1) + '. row moved to ' + (new_index + 1);
  },
  onDragStart: function(tbody, row, index) {
    // add event handler which is used to scroll
    window.addEventListener('mousemove', move);
  }
});

// Get closest parent with scroll
function getScrollParent(node) {
  if (node == null) {
    return null;
  }

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}

// Get closest parent with scroll for table3 
var scrollEl = getScrollParent(document.getElementById('table3'));

// Get viewport height
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

// Move function to be called after drag start and before drop
function move(event) {
  // Get scroll div's Y position
  let scrollElYPosition = scrollEl.offsetHeight - scrollEl.scrollTop;

  //console.log(scrollEl.offsetHeight, scrollEl.scrollTop, event.pageY );

  // Check if mouse Y position is less than 30.
  // If yes then need to scroll.
  if (vh - event.clientY < 30 || scrollElYPosition - event.pageY < 30) {
    scrollEl.scroll(0, scrollEl.scrollTop + 30);
  }
}
table {
  float: left;
  margin: 20px;
  font-size: 14px;
  font-family: tahoma, arial, sans-serif;
}

table.sorting-table {
  cursor: ns-resize;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
}

table thead th {
  background-color: #ccc;
  padding: 5px 8px;
}

table td {
  background-color: #ddd;
  padding: 5px 8px;
}

table tr.sorting-row td {
  background-color: #8b8;
}

table td.sorter {
  background-color: #f80;
  width: 10px;
  cursor: ns-resize;
}

.sort-handler {
  float: right;
  background-color: #f80;
  width: 14px;
  height: 14px;
  margin: 2px 0 0 6px;
  cursor: ns-resize;
}

table.sorting-table tbody tr:not(.sorting-row) td {
  opacity: 0.2;
}


/* some styling for table1 */

table#table1 tr.sorting-row td {
  background-color: #ccc;
}

table#table1.sorting-table {
  cursor: ns-resize;
  box-shadow: none;
  outline: 1px solid #333;
}

table#table1.sorting-table tbody tr:not(.sorting-row) td {
  opacity: 1;
  color: #bbb;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}
<script type="text/javascript" src="https://www.jqueryscript.net/demo/touch-table-row-sorter/RowSorter.js"></script>

<div id='sortable' style='height:200px;overflow-y:scroll'>
  <table id="table3">
    <thead>
      <tr>
        <th colspan="3">handler: "span.sort-handler"</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1</td>
        <td>Record 1 <span class="sort-handler"></span></td>
        <td>Record 1</td>
      </tr>
      <tr>
        <td>Row 2</td>
        <td>Record 2 <span class="sort-handler"></span></td>
        <td>Record 2</td>
      </tr>
      <tr>
        <td>Row 3</td>
        <td>Record 3 <span class="sort-handler"></span></td>
        <td>Recrod 3</td>
      </tr>
      <tr>
        <td>Row 4</td>
        <td>Record 4 <span class="sort-handler"></span></td>
        <td>Record 4</td>
      </tr>
      <tr>
        <td>Row 5</td>
        <td>Record 5 <span class="sort-handler"></span></td>
        <td>Record 5</td>
      </tr>
      <tr>
        <td>Row 6</td>
        <td>Record 6 <span class="sort-handler"></span></td>
        <td>Record 6</td>
      </tr>
      <tr>
        <td>Row 7</td>
        <td>Record 7 <span class="sort-handler"></span></td>
        <td>Record 7</td>
      </tr>
      <tr>
        <td>Row 8</td>
        <td>Record 8 <span class="sort-handler"></span></td>
        <td>Record 8</td>
      </tr>
    </tbody>
    <tfoot>5
      <tr>
        <td colspan="3">&nbsp;</td>
      </tr>
    </tfoot>
  </table>
</div>
Karan
  • 12,059
  • 3
  • 24
  • 40
0

I found the solution just added,

$('#table3 tr').draggable();

ayyanar pms
  • 169
  • 1
  • 2
  • 13