我有一个jQuery UI排序列表.我试图使其在移动设备上工作.我使用触摸屏解决方法.为了滚动我必须停用可排序的功能,我已经做到了,并且一个列表元素的taphold激活可排序的功能.这是正常工作,但问题是,我想要的是在taphold允许排序的元素.现在它只是这样工作：点击元素(taphold stops),然后我必须再次点击它才能排序.
<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/)的例子.
有谁知道如何解决这个问题？
解决方法
我设法做到了
我修改了一部分这样的touch punch(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','_touchMove'))
.bind('touchend','_touchEnd'));
// Call the original $.ui.mouse init method
_mouseInit.call(self);
};
