移动设备上的jQuery插件tableDnD

Question

我正在一些包含jQuery表的网页上成功地使用tableDnD插件。

在常规监视器上，一切都正常进行，但tableDnD在touchScreen设备上会导致实际上想滚动表行的用户无意中移动表行。

如果HTML表高于触摸屏视图端口，则用户可以通过拖动滑动向上滚动。然而，因此，他移动了一排表，而不打算这样做。

有谁能解决这个问题吗？

Answer 1

您可以指定一个dragHandle并使一个列可拖放吗？然后，该表的其余部分将像以前一样工作，您的用户将能够滚动。

看看https://github.com/isocra/TableDnD/blob/master/index.html#:~:text=%3Ch2%3E-,Identify%20rows,-%3C/h2%3E

Answer 2

我放置了一个复选框来激活或禁用排序模式。

$("#enableRowSort").click(function() { // checkbox
   url = window.location.href;
   url = url + "&enableRowSort=" + $(this).prop("checked");
   window.location.href = url;
});

PHP代码：

if ( $_REQUEST["enableRowSort"] ) {
   $checked = "checked";
   $title = "Deactivate sort mode";
   $enableRowSort = true;
} else {
   $checked = "";
   $title = "Activate sort mode";
   $enableRowSort = false;
}
$checkbox = "<input type='checkbox' id='enableRowSort' name='enableRowSort' ".$checked.">";
$checkbox .= "<label for='enableRowSort' title='".$title."'> Sort using Drag & Drop</label>";

if ( $enableRowSort ) {
    $js = "<script>
    $js .= '$("table").tableDnD();'
    $js .= "</script>";
} else $js = ";

echo $checkbox;
echo $js;

这是我的代码的简化版本。它没有经过测试，因为真正的代码是我的框架的一部分。