Jquery ui可移动的可排序保持和拖动 [英] Jquery ui sortable hold and drag for mobile
问题描述
我有一个jQuery UI可排序列表。我试图让它在移动设备上运行。我使用了触摸打孔解决方法。为了滚动,我必须停用可排序的功能,我已经完成了,并且在列表元素的taphold上激活可排序的功能。这工作正常,但问题是我想在taphold上允许对元素进行排序。现在它只是这样工作:taphold元素(taphold停止),然后我必须再次点击它以进行排序。
I have a jQuery UI sortable list. I am trying to make it work on mobile devices. I used the touch punch workaround. In order to scroll I have to deactivate the sortable function, I have done that and on taphold of a list element activate the sortable function. That is working ok, but the problem is that I want that while on taphold to allow the sorting of the element. Now it only works like this: taphold the element (taphold stops) and then I have to again tap it in order to sort.
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/ 。
Here is a jsfiddle(https://jsfiddle.net/3cygah12/) of the example.
任何人都知道如何解决这个问题?
Anyone know how to solve this issue?
推荐答案
我设法做到了。
我修改了一部分触摸打卡( http://touchpunch.furf.com/ )这样的代码将touchstart绑定到taphold -
I modified a part of touch punch( http://touchpunch.furf.com/ ) code like this to bind touchstart to 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 。它现在有效!
这篇关于Jquery ui可移动的可排序保持和拖动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!