Jquery ui sortable hold and drag for mobile

Mam listę do sortowania jQuery UI. Próbuję działać na urządzeniach mobilnych. Użyłem obejścia dotykowego. Aby przewinąć muszę dezaktywować funkcję sortowania, zrobiłem to i na taflecie elementu listy aktywować funkcję sortowalną. To działa dobrze, ale problem polega na tym, że chcę to na taflonie, aby umożliwić sortowanie elementu. Teraz działa tylko tak: taphold element (taphold zatrzymuje się), a następnie muszę go ponownie dotknąć, aby sortować.Jquery ui sortable hold and drag for mobile

HTML kod:

<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>

kod 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}); 
});

Oto jsfiddle (https://jsfiddle.net/3cygah12/) na przykład.

Ktoś wie, jak rozwiązać ten problem?

Źródło

2015-12-01 Shile

musisz zaimplementować zdarzenia dotykowe - http://www.javascriptkit.com/javatutors/touchevents.shtml - możesz znaleźć wiele przykładów w sieci, jednak ponieważ pracujesz na osi Y, czyli w górę/w dół musisz ustawić timer na co najmniej jedną sekundę przed ustawieniem (wyłączone: false) w przeciwnym razie przewijanie i przeciąganie elementów może być natychmiastowe i może pojawić się problem – Tasos

już to zrobiłem, problemem jest to, że nie mogę zadzwonić na początek przeciągnij na taflecie lub dotknięcie ekranu lub coś innego. Mogę włączyć sortowanie, ale mogę przeciągnąć element tylko wtedy, gdy funkcja się zakończy. To działa jak ta karteczka (dotykowy) -> umożliwia sortowanie -> taflet (dotykowy) kończy się-> a następnie może przeciągnąć. – Shile

Tak, wiem jak to działa, wypróbowałem to na mojej komórce, kiedy zobaczyłem twoją Q. spójrz na odpowiedź, którą dałem dawno temu, za przeciąganie pozycji na osi X, żeby zobaczyć, co mam na myśli mówiąc o wydarzeniach dotykowych JS. możesz spróbować odwrócić go do pracy tylko na osi Y i sprawdzić, czy może wykonać to zadanie - http://stackoverflow.com/questions/29966181/jquery-touchswipe-event-on-element-prevents-scroll/29969575#29969575 – Tasos

udało mi się to zrobić.

że zmodyfikowana część dotyku stempel (http://touchpunch.furf.com/) kodu jak ten wiąże touchstart do 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); 
};

a także wykorzystywane https://github.com/benmajor/jQuery-Touch-Events. Teraz działa!

Źródło

2015-12-11 15:25:47 Shile

Dobra robota kumpel :) – Sidius

To nie działa dla mnie. Używam wersji jQuery UI Touch Punch 0.2.3' i zamieniam kod tak, jak podałeś. A także włączyłem przed dotykiem "touch-mouse-events" z podanego linku github. Co ja robię źle? – locateganesh

Hej, mam taki sam problem, jaki miałeś, ale nie rozumiem w pełni, w jaki sposób korzystałeś z zdarzeń jQuery Touch. Czy mógłbyś zmodyfikować swoje skrzypce lub zamieścić nowe ze swoimi zmianami? +1 – TheWandererr

zwróciłem ten sam problem z tym maleńkim plugin:

http://touchpunch.furf.com/

Dodaj do swojej biblioteki do swoich skryptów.

Innym sposobem, aby to zrobić, jest pobranie całego mobilnego jquery biblioteki (here) i pracę jak ten

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

Źródło

2015-12-08 11:14:07 Sidius

Czy mógłbyś wyjaśnić, co masz na myśli, mówiąc: // Czy niektóre rzeczy? – TheWandererr

Zależy od tego, co chcesz zrobić w swoim programie. – Sidius

Jquery ui sortable hold and drag for mobile

Odpowiedz

Powiązane problemy