Cursore jQuery-ui - Come impedire a due cursori di controllarsi a vicenda
-
08-07-2019 - |
Domanda
Questo è in riferimento alla domanda precedentemente posta
Il problema qui è che ogni cursore
controlla l'altro. Si traduce in feedback.
Come posso fermarlo?
$(function() {
$("#slider").slider({ slide: moveSlider2 });
$("#slider1").slider({ slide: moveSlider1 });
function moveSlider2( e, ui )
{
$('#slider1').slider( 'moveTo', Math.round(ui.value) );
}
function moveSlider1( e, ui )
{
$('#slider').slider( 'moveTo', Math.round(ui.value) );
}
});
Soluzione
Questo è una specie di hack, ma funziona:
$(function () {
var slider = $("#slider");
var slider1 = $("#slider1");
var sliderHandle = $("#slider").find('.ui-slider-handle');
var slider1Handle = $("#slider1").find('.ui-slider-handle');
slider.slider({ slide: moveSlider1 });
slider1.slider({ slide: moveSlider });
function moveSlider( e, ui ) {
sliderHandle.css('left', slider1Handle.css('left'));
}
function moveSlider1( e, ui ) {
slider1Handle.css('left', sliderHandle.css('left'));
}
});
Fondamentalmente, si evita il feedback manipolando direttamente il CSS, non generando l'evento slide.
Altri suggerimenti
È possibile memorizzare un CurrentSlider var = 'slider';
su mousedown su uno dei cursori, imposta il valore CurrentSlider su quel cursore,
e nel tuo metodo moveSlider (...) controlli se questo è CurrentSlider, in caso contrario, non propaghi lo scorrimento (evitando il feedback)
Potresti semplicemente fornire un parametro opzionale alle tue funzioni moveSlider1
e moveSlider2
che, se impostato su un valore vero, sopprime la ricorsione.
Un approccio più semplice che è una specie di ibrido delle risposte sopra:
var s1 = true;
var s2 = true;
$('#slider').slider({
handle: '.slider_handle',
min: -100,
max: 100,
start: function(e, ui) {
},
stop: function(e, ui) {
},
slide: function(e, ui) {
if(s1)
{
s2 = false;
$('#slider1').slider("moveTo", ui.value);
s2 = true;
}
}
});
$("#slider1").slider({
min: -100,
max: 100,
start: function(e, ui) {
},
stop: function(e, ui) {
},
slide: function(e, ui) {
if(s2)
{
s1 = false;
$('#slider').slider("moveTo", ui.value);
s1 = true;
}
}
});
});
Ho provato ora e tutte le risposte non funzionano probabilmente a causa di modifiche all'interfaccia utente di jquery.
La soluzione di Badri funziona se si sostituisce
$('#slider').slider("moveTo", ui.value);
con
$('#slider').slider("option", "value", ui.value);