在移动设备上使用可排序的触摸事件 + jquery-ui 无法按预期工作答案

【问题标题】：Using touch event + jquery-ui sortable on mobile not working as expected在移动设备上使用可排序的触摸事件 + jquery-ui 无法按预期工作
【发布时间】：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”。请检查编辑。谢谢

标签： javascript jquery html jquery-ui jquery-mobile

【解决方案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。
我想我已经找到了解决方案。我会测试它，如果它有效，我会把它作为答案