Rowsorter JQuery插件问题

Question

大家好，

我正在使用支持触控的 Drag'n'drop Table Sorter 插件https://www.jqueryscript.net/table/touch-table-row-sorter.html

上下拖动表格行。

我的问题是在“记录 9”下方拖动“记录 1”列时页面没有滚动。

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

请查看此 JSFiddle 链接https://jsfiddle.net/ayyanarpms/7sagcu0j/4/

我需要的是这个https://jqueryui.com/resources/demos/draggable/scroll.html

Answer 1

如果您将class="sort-handler" 添加到td，那么它工作正常。见下面的代码和sn-p。

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>

Answer 2

尝试如下。为 dragStart 上的鼠标移动添加事件侦听器，并在放置时将其删除。

使用滚动表获取最近的父级并获取视口高度。

在move函数里面是事件监听函数，检查视口高度和当前鼠标的Y差是否小于30然后滚动父级。

还要检查可滚动父级的页面偏移高度和鼠标的PageY差异小于30然后滚动父级。

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>

Answer 3

我找到了刚刚添加的解决方案，

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