JQuery ui сортировка и перенос для мобильных устройств
У меня есть отсортированный список jQuery UI. Я пытаюсь заставить его работать на мобильных устройствах. Я использовал обходное решение для сенсорного пунша. Для прокрутки я должен деактивировать функцию сортировки, я сделал это, и при нажатии элемента списка активирует сортируемую функцию. Это работает нормально, но проблема в том, что я хочу, чтобы в то время как на контроле, чтобы разрешить сортировку элемента. Теперь он работает только так: taphold элемент (taphold останавливается), а затем я должен снова нажать его, чтобы сортировать.
Код 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/).
Кто-нибудь знает, как решить эту проблему?
Ответы
Ответ 1
Мне это удалось.
Я изменил часть касания (http://touchpunch.furf.com/), как это, чтобы связать touchstart, чтобы нажать -
mouseProto._mouseInit = function () {
var self = this;
// Delegate the touch handlers to the widget 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. Он работает сейчас!
Ответ 2
Я обратился к той же проблеме с этим крошечным плагином:
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
}
});