hey all,
i've created a very iphone-y slider element that is both restricted in overall movement horizontally (0-400px and it does not move vertically) and "snaps" to either side of the 400px "container" when it has passed the 200px mark and the drag has ended. It works perfect in firefox. In Safari, the onEnd function that positions the element to either end of this 400px container, is never called. Whats more, the draggable element "sticks" to the mouse cursor and i have to reload the page to end the animation.
Here's my code
<div style="width:100px;height: 60px;background-color:#000;z-index:999" id="dragtest" />
<script language="JavaScript" type="text/javascript">
new Draggable('dragtest', { constraint: 'horizontal',
onEnd: function(e, me) {
console.debug("!!!")
element = e.element
x = element.style.left
x = x.gsub('px','')
if (x >= 200) {
$('dragtest').style.left = 400+'px';
}
if (x < 200) {
$('dragtest').style.left = 0+'px';
}
console.debug("Snapping to ", element.style.left, " (x was ", x, ")")
return true;
},
snap: function(x, y) {
ret_x = x
ret_y = y
if (x >= 400) {
ret_x = 400
}
if (x <= 0) {
ret_x = 0
}
return [ret_x,ret_y]
}
});
</script>
thanks! andrew