Rowsorter JQuery插件问题

大家好，

我正在使用启用触摸的拖放表排序插件https://www.jqueryscript.net/table/touch-table-row-sorter.html

以向上和向下拖动表行。

我的问题是页面在拖动时没有滚动；记录1"；下面的列"；记录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' 
});

请检查此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, 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>

尝试如下。在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>

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

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

相关内容

最新更新

热门标签：