Jquery consente di tenere e trascinare il cellulare per il telefono

Ho una lista ordinabile dell'interfaccia utente jQuery. Sto cercando di farlo funzionare su dispositivi mobili. Ho usato la soluzione alternativa al tocco. Per poter scorrere devo disattivare la funzione ordinabile, l'ho fatto e su taphold di un elemento list attivare la funzione ordinabile. Funziona bene, ma il problema è che lo voglio mentre sono su taphold per consentire l'ordinamento dell'elemento. Ora funziona solo così: taphold l'elemento (taphold stops) e poi devo ancora toccarlo per ordinare.Jquery consente di tenere e trascinare il cellulare per il telefono

codice 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 Codice:

$('#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}); 
});

Ecco una jsfiddle (https://jsfiddle.net/3cygah12/) dell'esempio.

Qualcuno sa come risolvere questo problema?

fonte

2015-12-01 Shile

è necessario implementare eventi di tocco - http://www.javascriptkit.com/javatutors/touchevents.shtml - è possibile trovare molti esempi sulla rete, tuttavia perché si sta lavorando sull'asse y ovvero su/in basso dovrai impostare un timer di almeno un secondo prima di impostare (disabilitato: falso) altrimenti lo scorrimento e il trascinamento di elementi potrebbero essere entrambi istantanei e potresti avere un problema – Tasos

l'ho già fatto, il problema è che non posso chiamare l'evento per trascinare avvio su taphold o touchstart o altro. Posso abilitare sortable ma posso trascinare l'elemento solo quando la funzione termina. Quindi funziona come questo taphold (touchstart) -> abilita ordinabile -> taphold (touchstart) ends-> then i può trascinare. – Shile

sì, so come funziona, l'ho provato sul mio cellulare quando ho visto la tua Q. dai un'occhiata a una risposta che ho dato qualche tempo fa per trascinare gli oggetti sull'asse X per vedere cosa intendo riguardo gli eventi di tocco JS. puoi provare a invertirlo per lavorare solo sull'asse Y e vedere se può fare il lavoro: http://stackoverflow.com/questions/29966181/jquery-touchswipe-event-on-element-prevents-scroll/29969575#29969575 – Tasos

sono riuscito a farlo.

ho modificato una parte del tatto punzone (http://touchpunch.furf.com/) codice come questo per legare TouchStart a 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); 
};

e utilizzato anche https://github.com/benmajor/jQuery-Touch-Events. Ora funziona!

fonte

2015-12-11 15:25:47 Shile

Buon compagno di lavoro :) – Sidius

Non funziona per me. Sto usando la versione di 'jQuery UI Touch Punch 0.2.3' e sostituisco il codice come hai dato. E ho anche incluso prima di toccare "touch-mouse-events" dal tuo github link. Che cosa sto facendo di sbagliato? – locateganesh

Ehi, ho lo stesso problema che hai avuto, ma non capisco appieno come hai usato gli eventi jQuery Touch. Potresti modificare il tuo violino o postarne uno nuovo con le tue modifiche? +1 – TheWandererr

Ho affrontato lo stesso problema con questo piccolo plugin:

http://touchpunch.furf.com/

Aggiungi questa libreria per la vostra ai propri script.

Un altro modo per farlo, è quello di scaricare l'intera biblioteca mobile jQuery (here) e lavoro come questo

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

fonte

2015-12-08 11:14:07 Sidius

Puoi spiegare cosa intendi con // Fai qualcosa? – TheWandererr

Dipende da ciò che si desidera dal programma. – Sidius

Jquery consente di tenere e trascinare il cellulare per il telefono

risposta

Problemi correlati