Jquery ui可移动的可排序保持和拖动

我有一个jQuery UI可排序列表.我试图让它在移动设备上运行.我使用了触摸打孔解决方法.为了滚动,我必须停用可排序的功能,我已经完成了,并且在列表元素的taphold上激活可排序的功能.这工作正常,但问题是我想在taphold上允许对元素进行排序.现在它只是这样工作:taphold元素(taphold停止)然后我必须再次点击它以排序.

HTML代码:

 
Block 1
 
Block 2
 
Block 3
 
Block 4
 
Block 5
 
Block 6
 
Block 7
 
Block 8
 
Block 9
 
Block 10
 
Block 11
 
Block 12
 
Block 13
 
Block 14
 
Block 15
 
Block 16
 
Block 17
 
Block 18
 
Block 19
 
Block 20
 
Block 21
 
Block 22
 
Block 23

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/).

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

我设法做到了.

我修改了这样的触摸打孔(http://touchpunch.furf.com/)代码的一部分来将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);
};  

并且还使用了https://github.com/benmajor/jQuery-Touch-Events.它现在有效!

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

http://touchpunch.furf.com/

将此库添加到您的脚本中.

另一种方法是下载整个移动jquery库(这里)并像这样工作

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