在移动设备上使用可排序的触摸事件 + jquery-ui 无法按预期工作
Posted
技术标签:
【中文标题】在移动设备上使用可排序的触摸事件 + jquery-ui 无法按预期工作【英文标题】：Using touch event + jquery-ui sortable on mobile not working as expected 【发布时间】：2017-10-14 01:51:03 【问题描述】：上下文：
我正在为移动设备制作一个网络应用程序。我正在使用 jquery-ui sortable 对第一个和最后一个项目不可排序的项目列表进行排序。
目标：
我的目标是使用 jquery-mobile 点击按住事件来启用 jquery-ui 可排序 库，以便用户可以对他点击的项目进行排序。当用户将项目放在正确的位置时，我想再次禁用 jquery-ui 可排序。
问题：
在可用性方面，我想要的是用户点击屏幕，按住 x 秒并且不停地按住，可以开始对项目进行排序。这没有发生。发生的事情是您需要停止为 jquery-ui sortable 捕获事件并允许用户对他想要的项目进行排序。
守则：
遵循我正在使用的代码的核心。您不需要移动设备来重现错误。
编辑
我检测到我需要 touch-puch javascript 库来模拟 jquery-ui 工作的触摸事件。基本上，该库将触摸事件转换为鼠标事件。但原来的问题并没有解决。
function initializeSortablePages()
var sortableParentDiv = $(".sortable");
var sortableDivs = $(".sortable .to-move");
$(sortableParentDiv).sortable(
items: sortableDivs,
stop: function (event, ui)
disableSortablePages(sortableParentDiv);
);
addTapHoldEventToSortablePages(sortableParentDiv, sortableDivs)
disableSortablePages(sortableParentDiv);
function addTapHoldEventToSortablePages(sortableParentDiv, sortableDivs)
var thisLib = this;
$(sortableDivs).bind('taphold', function (event, ui)
enableSortablePages(sortableParentDiv);
);
function enableSortablePages(sortableParentDiv)
$(sortableParentDiv).sortable("enable");
function disableSortablePages(sortableParentDiv)
$(sortableParentDiv).sortable("disable");
initializeSortablePages();.sortable div
width: 100px;
height: 30px;
background-color: white;
margin-top: 20px;
padding-top: 15px;
background-color: #d4d4d4;
padding-left:10px;
cursor: move;
<html lang="en">
<head>
<meta charset="utf-8">
<title>sortable demo</title>
<link rel="stylesheet" href="style.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div class="sortable">
<div>Item 1</div>
<div class="to-move">Item 2</div>
<div class="to-move">Item 3</div>
<div class="to-move">Item 4</div>
<div>Item 5</div>
</div>
<script src="javascript.js"></script>
</body>
</html>【问题讨论】：
thisLib.addTapHoldEventToSortablePages() 和 thisLib.disableSortablePages() 定义在哪里？我看到创建的函数，但我没有看到它们作为对象的属性添加。
嗨@Twisty。因为我修改了代码以显示他的简单版本，所以我忘记删除“thisLib”。请检查编辑。谢谢
【参考方案1】：
我希望这是一个有价值的例子。
工作：https://jsfiddle.net/Twisty/pzngpwvq/10/
JavaScript
$(function()
var thisLib =
sortParentDiv: ".sortable",
sortDivs: ".to-move",
init: function()
console.log("Initialization Started.");
var self = this;
$(self.sortParentDiv).sortable(
disabled: true,
items: "> " + self.sortDivs,
stop: function(e, ui)
self.disableSortPages(e);
);
$(self.sortParentDiv + " div").disableSelection();
self.addTapHoldEvent();
//self.disableSortPages();
console.log("Initialization completed.");
,
addTapHoldEvent: function()
var self = this;
$(self.sortParentDiv).on("taphold", self.sortDivs, function(e)
self.enableSortPages.call(self, e)
);
console.log("TapHold bound to ", $(self.sortDivs));
,
removeTapHoldEvent: function()
var self = this;
$(self.sortParentDiv).off("taphold", self.sortDivs);
console.log("TapHold unbound to ", $(self.sortDivs));
,
enableSortPages: function(e)
console.log("Handler - Enable Sort |", e.type, e.target);
var self = this;
console.log(self);
$(".ui-sortable-handle").addClass("active");
self.removeTapHoldEvent.apply(self);
$(self.sortParentDiv).sortable("enable");
,
disableSortPages: function()
console.log("Handler - Disable Sort");
var self = this;
$(self.sortDivs).removeClass("active");
$(self.sortParentDiv).sortable("disable");
self.addTapHoldEvent();
;
thisLib.init();
);
当启动时，sortable 被初始化为disabled true。我们还绑定了taphold 回调来启用排序。我们删除了taphold 绑定，以确保用户在排序时执行点按操作不会造成混淆。
现在用户可以进行排序了。排序完成后，taphold 再次被绑定，排序被禁用。
目前仅在桌面浏览器中测试，但您可以在移动设备上测试https://jsfiddle.net/Twisty/pzngpwvq/10/show/
希望这有助于使其更加清晰。
正如您在编辑中提到的，您需要使用 Touch Punch 库将 tap 转换为 click 等，以便 jQuery UI 可以处理这些活动。
更新
在 Touch Punch 中添加并在 android 上使用 Chrome 和 FireFox 进行了测试：https://jsfiddle.net/Twisty/pzngpwvq/11/show/
【讨论】：
嗨@Twisty。谢谢您的帮助。但问题并没有得到解决。你正在做的或多或少是我正在做的。您需要点击并按住，然后将手指从屏幕上移开，然后您就可以开始对元素进行排序了。我想要的是，在点击并按住并没有从屏幕上伸出手指的情况下，jquery-ui sortable 开始在点击的目标上拖动。 @RicardoRocha 不确定您是否能够做到这一点。您可能必须在某种意义上更改逻辑，即始终启用可排序但长按允许开始排序或触发start。
我想我已经找到了解决方案。我会测试它，如果它有效，我会把它作为答案以上是关于在移动设备上使用可排序的触摸事件 + jquery-ui 无法按预期工作的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery Mobile 和 jQuery 可排序的第一页加载时触摸打孔不起作用