问题描述
大家好，
我正在使用支持触摸的拖放式表格排序插件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"> </td>
</tr>
</tfoot>
</table>
</div>
查询：
RowSorter("#table3",{
handler: 'span.sort-handler'
});
请检查此 JSfiddle 链接 https://jsfiddle.net/ayyanarpms/7sagcu0j/4/
我需要的是这个 https://jqueryui.com/resources/demos/draggable/scroll.html
解决方法
如果您将 class="sort-handler" 添加到 td 则它工作正常。请参阅下面的代码和片段。
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.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,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"> </td>
</tr>
</tfoot>
</table>
</div>尝试如下。在 dragStart 上添加鼠标移动事件侦听器，并在放下时将其删除。
通过滚动表格获取最近的父级并获取视口高度。
在事件侦听器函数 move 函数中，检查视口高度和当前鼠标的 Y 差值是否小于 30，然后滚动父级。
还要检查可滚动父级的页面偏移高度和鼠标的 PageY 差异是否小于 30，然后滚动父级。
RowSorter("#table3",{
handler: 'span.sort-handler',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,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,sans-serif;
}
table.sorting-table {
cursor: ns-resize;
box-shadow: 0 0 16px rgba(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,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"> </td>
</tr>
</tfoot>
</table>
</div>我找到了刚刚添加的解决方案，
$('#table3 tr').draggable();