在移动设备上使用触摸事件 + jquery-ui 无法按预期工作

Question

上下文：

我正在为移动设备制作网络应用程序。我正在使用 jquery-ui sortable 对第一个和最后一个项目不可排序的项目列表进行排序。

目标：

我的目标是使用 jquery-mobile 点按事件来启用 jquery-ui sortable 库，以便用户可以对他点击的项目进行排序。当用户将项目放在正确的位置时，我想再次禁用 jquery-ui sortable。

问题：

在可用性方面，我想要的是用户点击屏幕，按住 x 秒并且不停地按住，可以开始对项目进行排序。这没有发生。发生的事情是您需要停止等待 jquery-ui sortable 捕获事件并允许用户对他想要的项目进行排序。

代码：

遵循我正在使用的代码的核心。您不需要移动设备来重现错误。

编辑

我发现我需要 touch-puch javascript 库来模拟 jquery-[=72= 的触摸事件]工作。基本上，该库将触摸事件转换为鼠标事件。但是原来的问题并没有解决

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>

Answer 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 上测试 w/Chrome 和 FireFox：https://jsfiddle.net/Twisty/pzngpwvq/11/show/

在移动设备上使用触摸事件 + jquery-ui 无法按预期工作

Using touch event + jquery-ui sortable on mobile not working as expected

html

javascript

jquery

jquery-ui

jquery-mobile