用于移动设备的Jquery ui可排序保持和拖动

我有一个jqueryui可排序列表。我正在努力让它在移动设备上工作。我使用了触摸打孔解决方案。为了滚动，我必须停用可排序功能，我已经这样做了，并在按住列表元素时激活可排序功能。这是正常的，但问题是我希望在taphold上允许对元素进行排序。现在它只能这样工作：点击元素（点击停止），然后我必须再次点击它以进行排序

HTML代码：

<ul class="list-group" id="wrapper">
 <li class="list-group-item">Block 1</li>
 <li class="list-group-item">Block 2</li>
 <li class="list-group-item">Block 3</li>
 <li class="list-group-item">Block 4</li>
 <li class="list-group-item">Block 5</li>
 <li class="list-group-item">Block 6</li>
 <li class="list-group-item">Block 7</li>
 <li class="list-group-item">Block 8</li>
 <li class="list-group-item">Block 9</li>
 <li class="list-group-item">Block 10</li>
 <li class="list-group-item">Block 11</li>
 <li class="list-group-item">Block 12</li>
 <li class="list-group-item">Block 13</li>
 <li class="list-group-item">Block 14</li>
 <li class="list-group-item">Block 15</li>
 <li class="list-group-item">Block 16</li>
 <li class="list-group-item">Block 17</li>
 <li class="list-group-item">Block 18</li>
 <li class="list-group-item">Block 19</li>
 <li class="list-group-item">Block 20</li>
 <li class="list-group-item">Block 21</li>
 <li class="list-group-item">Block 22</li>
 <li class="list-group-item">Block 23</li>
</ul>

下面是该示例的一个jsfiddle（）

---

有人知道如何解决这个问题吗？

我用这个小插件解决了同样的问题：

将此库添加到脚本中

另一种方法是下载整个mobilejquery库（）并像这样工作

$('#yourSelector').on('touchstart mousedown', function(event){
  event.preventDefault();
  var touch = event.touches[0];
 if(touch){
   //Do some stuff
 }
 else {
  //Do some other stuff
 }
});

我设法做到了

我修改了touch-punch（）代码的一部分，将touchstart绑定到taphold-

mouseProto._mouseInit = function () {

var self = this;

// Delegate the touch handlers to the widget's element
self.element
    .bind('taphold', $.proxy(self, '_touchStart'))   // IMPORTANT!MOD FOR TAPHOLD TO START SORTABLE
    .bind('touchmove', $.proxy(self, '_touchMove'))
    .bind('touchend', $.proxy(self, '_touchEnd'));

// Call the original $.ui.mouse init method
_mouseInit.call(self);
};  

---

也用过。现在可以了

你需要实现触摸事件——你可以在网上找到很多例子，但是，因为你在y轴上工作，即向上/向下，你需要在设置之前至少设置一秒的计时器（禁用：false），否则滚动和拖动项目可能都是瞬时的，你可能会遇到一个问题我已经这样做了，问题是我不能在taphold或touchstart上调用drag start事件。我可以启用sortable，但我只能在函数完成时拖动元素。因此它的工作原理类似于taphold（touchstart）->enables sortable->taphold（touchstart）ends->然后我可以拖动。是的，我知道它是如何工作的，当我看到你的Q时，我在我的手机上试过。看看我不久前给出的答案，在X轴上拖动项目，看看我对JS touch事件的看法。您可以尝试将其反转为仅在Y轴上工作，然后看看是否可以完成此工作--我明白您的意思，但此问题的真正解决方案是以某种方式调用本机jquery ui事件，以便对正在接触的当前元素进行排序，但没有相关文档，我似乎无法复制它一个可能的解决方案是两全其美。使用scrollstart功能可以禁用表格，并单击以启用拖放。我认为这是用户在手机上所期望的功能。看看吧，如果你喜欢这种方法，我会把它作为一个答案——它对我不起作用。我使用的是

jqueryuitouchpunch 0.2.3版本，并按照您给出的替换代码。此外，我还从您给定的github链接中包含了触控打孔前的触摸鼠标事件。我做错了什么？嘿，我和你有同样的问题，但我不完全理解你是如何使用jQuery Touch事件的。你可以修改你的小提琴或张贴一个新的与您的变化+1您可以解决这个问题吗@我更新了OP的提琴来让它工作（在我的触摸屏笔记本电脑和iPhone上）：你能解释一下你的意思吗//做一些事情？取决于你想从你的程序中做什么。
mouseProto._mouseInit = function () {

var self = this;

// Delegate the touch handlers to the widget's element
self.element
    .bind('taphold', $.proxy(self, '_touchStart'))   // IMPORTANT!MOD FOR TAPHOLD TO START SORTABLE
    .bind('touchmove', $.proxy(self, '_touchMove'))
    .bind('touchend', $.proxy(self, '_touchEnd'));

// Call the original $.ui.mouse init method
_mouseInit.call(self);
};