Question

上下文

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

目标：

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

问题：

在可用性方面，我想要的是用户点击屏幕，保持按住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>

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();
});

启动时，可以使用disabled初始化sortable。我们还绑定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/

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

1 个答案: