微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Jquery ui可排序和拖动移动

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

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/)的例子.

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

解决方法

我设法做到了

修改了一部分这样的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);
};

并使用https://github.com/benmajor/jQuery-Touch-Events.它现在工作!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐