Jquery ui 可排序的按住和拖动移动设备

Question

我有一个 jQuery UI 可排序列表。我正在尝试让它在移动设备上运行。我使用了触摸打洞解决方法。为了滚动，我必须停用可排序功能，我已经做到了这一点，并在按住列表元素时激活可排序功能。这工作正常，但问题是我希望在按住时允许对元素进行排序。现在它只能这样工作:点击元素(点击停止)，然后我必须再次点击它才能排序。

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>

JS 代码:

$('#wrapper li').on('taphold', function(event, ui) {
    $( "#wrapper li" ).removeClass('selected');
    $( "#wrapper" ).sortable({disabled:false});
    $(this).addClass('selected');
});

$( "#wrapper" ).sortable({disabled:true,containment: "parent"});

$( "#wrapper" ).on( "sortupdate", function( event, ui ) {
    $( "#wrapper" ).sortable({disabled:true});
} );

这是示例的 jsfiddle( https://jsfiddle.net/3cygah12/ )。

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

Answer 1

我成功了。

我修改了一部分 touchpunch( http://touchpunch.furf.com/ ) 代码，将 touchstart 绑定(bind)到 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);
};  

并且还使用了https://github.com/benmajor/jQuery-Touch-Events 。现在可以了!