mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Slider: when handles overlap, clicking and dragging will now pick the last one that was moved. Fixed #3467 - Sliders Handles can overlap, only small sliver of slider is selectable
This commit is contained in:
parent
ccdceddd80
commit
a18863205e
@ -104,4 +104,55 @@ test( "programmatic event triggers", function() {
|
||||
|
||||
});
|
||||
|
||||
test( "mouse based interaction part two: when handles overlap", function() {
|
||||
expect(4);
|
||||
|
||||
var el = $( "#slider1" )
|
||||
.slider({
|
||||
values: [ 0, 0, 0 ],
|
||||
start: function( event, ui ) {
|
||||
equal(handles.index(ui.handle), 2, "rightmost handle activated when overlapping at minimum (#3736)");
|
||||
}
|
||||
}),
|
||||
handles = el.find( ".ui-slider-handle" );
|
||||
handles.eq(0).simulate( "drag", { dx: 10 } );
|
||||
|
||||
QUnit.reset();
|
||||
el = $( "#slider1" )
|
||||
.slider({
|
||||
values: [ 10, 10, 10 ],
|
||||
max: 10,
|
||||
start: function( event, ui ) {
|
||||
equal(handles.index(ui.handle), 0, "leftmost handle activated when overlapping at maximum");
|
||||
}
|
||||
}),
|
||||
handles = el.find( ".ui-slider-handle" );
|
||||
handles.eq(0).simulate( "drag", { dx: -10 } );
|
||||
|
||||
QUnit.reset();
|
||||
el = $( "#slider1" )
|
||||
.slider({
|
||||
values: [ 19, 20 ]
|
||||
}),
|
||||
handles = el.find( ".ui-slider-handle" );
|
||||
handles.eq(0).simulate( "drag", { dx: 10 } );
|
||||
el.on("slidestart", function(event, ui) {
|
||||
equal(handles.index(ui.handle), 0, "left handle activated if left was moved last");
|
||||
});
|
||||
handles.eq(0).simulate( "drag", { dx: 10 } );
|
||||
|
||||
QUnit.reset();
|
||||
el = $( "#slider1" )
|
||||
.slider({
|
||||
values: [ 19, 20 ]
|
||||
}),
|
||||
handles = el.find( ".ui-slider-handle" );
|
||||
handles.eq(1).simulate( "drag", { dx: -10 } );
|
||||
el.on("slidestart", function(event, ui) {
|
||||
equal(handles.index(ui.handle), 1, "right handle activated if right was moved last (#3467)");
|
||||
});
|
||||
handles.eq(0).simulate( "drag", { dx: 10 } );
|
||||
|
||||
});
|
||||
|
||||
}( jQuery ) );
|
||||
|
15
ui/jquery.ui.slider.js
vendored
15
ui/jquery.ui.slider.js
vendored
@ -233,21 +233,15 @@ $.widget( "ui.slider", $.ui.mouse, {
|
||||
distance = this._valueMax() - this._valueMin() + 1;
|
||||
this.handles.each(function( i ) {
|
||||
var thisDistance = Math.abs( normValue - that.values(i) );
|
||||
if ( distance > thisDistance ) {
|
||||
if (( distance > thisDistance ) ||
|
||||
( distance === thisDistance &&
|
||||
(i === that._lastChangedValue || that.values(i) === o.min ))) {
|
||||
distance = thisDistance;
|
||||
closestHandle = $( this );
|
||||
index = i;
|
||||
}
|
||||
});
|
||||
|
||||
// workaround for bug #3736 (if both handles of a range are at 0,
|
||||
// the first is always used as the one with least distance,
|
||||
// and moving it is obviously prevented by preventing negative ranges)
|
||||
if( o.range === true && this.values(1) === o.min ) {
|
||||
index += 1;
|
||||
closestHandle = $( this.handles[index] );
|
||||
}
|
||||
|
||||
allowed = this._start( event, index );
|
||||
if ( allowed === false ) {
|
||||
return false;
|
||||
@ -419,6 +413,9 @@ $.widget( "ui.slider", $.ui.mouse, {
|
||||
uiHash.values = this.values();
|
||||
}
|
||||
|
||||
//store the last changed value index for reference when handles overlap
|
||||
this._lastChangedValue = index;
|
||||
|
||||
this._trigger( "change", event, uiHash );
|
||||
}
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user