[jQuery] Draggables help
[jQuery] Draggables help
As I just can't track down a javascript slider that can cope with two
handles satisfactorially, I am trying to implement my own using just
the Draggable functionality of the interface library.
I need to make a slider for selecting a minimum and maximum limits of
a range of values that:
* cope with 2 handles in the slider
* can snap the handles to notches while dragging, the size of which
doesn't change based on the position of either of the sliders
* will not allow the handles to either pass each other or overlap
So far this is as far as I have got:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/jquery/interface/
interface.js"></script>
<style type="text/css">
/* Sliders */
.slider {
width: 171px;
height: 58px;
position: relative;
margin: 2px;
padding: 0px;
overflow: hidden;
background: url(configurator%209/ui/configurator/range_chart.gif) no-
repeat top;
}
.slideDomain {
position: absolute;
height: 100%;
}
.leftDomain {
left: 0px;
}
.rightDomain {
right: 0px;
}
.slideHandle {
width: 19px;
height: 58px;
position: absolute;
font-size: 0;
line-height: 0;
overflow: hidden;
border: none;
top: 0px;
}
.leftHandle {
background: url(configurator%209/ui/configurator/
range_handle_left.gif) no-repeat bottom;
}
.rightHandle {
left: 152px;
background: url(configurator%209/ui/configurator/
range_handle_right.gif) no-repeat bottom;
}
</style>
<script type="text/javascript">
function RangeSlider (slideContainer, slideMin, slideMax, fieldMin,
fieldMax, rangeMin, rangeMax)
{
var self = this;
self.container = $(slideContainer);
self.handleMin = $(slideMin);
self.handleMax = $(slideMax);
self.notches = 10;
self.spacing = Math.round (self.container.width () / self.notches);
console.log (self.minLeft = parseInt (self.handleMin.css ('left'),
10));
console.log (self.maxLeft = parseInt (self.handleMax.css ('left'),
10));
var leftDraggable = self.handleMin.Draggable ({
containment : 'parent',
grid : self.spacing,
onDrag : function (newX)
{
if (newX >= self.maxLeft)
{
console.log ('Left too far');
$('#dragHelper').css ('left', self.maxLeft - self.grid);
}
},
onChange : function ()
{
self.minLeft = parseInt (self.handleMin.css ('left'), 10);
}
});
var rightDraggable = self.handleMax.Draggable ({
containment : 'parent',
grid : self.spacing,
onDrag : function (newX)
{
if (newX <= self.minLeft)
{
console.log ('Right too far');
$('#dragHelper').css ('left', self.minLeft + self.grid);
}
},
onChange : function ()
{
self.maxLeft = parseInt (self.handleMax.css ('left'), 10);
}
});
}
var test;
$(document).ready (function ()
{
test = new RangeSlider ('#slider1', '#left', '#right', 0, 0, 0, 0);
});
</script>
<body>
</body>
<div class="slider" id="slider1">
<div class="slideHandle leftHandle" id="left"> </div>
<div class="slideHandle rightHandle" id="right"> </div>
</div>
</html>
At the moment I'm trying to implement code that wil restrict the
handle being dragged from sliding past the other one. What I have
written does successfully detect when one handle is overlapping or
passing the other, but the code to reposition the drag helper to an
acceptible location doesn't seem to work.
Does anyone know what I'm doing wrong here?