Hi all
I'm just getting started with script.aculo.us, and prototype etc.
My first mini-project was to use Draggable to adjust the column widths
in a page. Here's the code (which seems to work) and any feedback would
be appreciated - especially if I'm doing things the wrong way.
Here's the code:
var colSpacer
function initPage() {
colSpacer = new Draggable('colspacer', {
revert:false, constraint:'horizontal',
change: function (d) { dragColTo(d.currentDelta()) }
});
}
function dragColTo(delta) {
var x = delta[0];
if(x < 10) { return; }
document.getElementById('navlinks').style.width = (x - 8) + 'px';
document.getElementById('content').style.marginLeft = (x + 2) +
'px';
}
I have three divs across the page:
'navlinks' is absolutely positioned on the left
'colspacer' is absolutely position just to the right of navlinks
'content' has a left margin equivalent to the width of navlinks,
allowing it to fill the page to the right
I've made 'colspacer' a Draggable and use its 'change' callback to
adjust both the width of 'navlinks' and the left margin of 'content'.
In the callback, I'm using currentDelta() to determine the x position of
the draggable. Is this the correct way? The name 'delta' suggested it
would return values indicating how far the object had been dragged from
its original position but the values returned seem to be absolute
position values. It's the absolute position I want.
Is there a way to specify a callback for when the drag ends? I don't
see one mentioned on this page:
http://wiki.script.aculo.us/scriptaculous/show/Draggable
The 'if(x < 10)' bit is because the very first change event seems to
provide an x value of 1 which would result in a negative width for
navlinks and a JS error in the browser. Subsequent change events seem
to provide valid x position values.
I have constrained the drag to being horizontal. Is there any way to
further constrain it to a range of values? For example, I might not
want the width of navlinks to become less than 100px. If I simply
ignore events where 'x' is too small, it kind of works but the position
of the dragged element ('colspacer') is not constrained so it doesn't
end up between the other two divs.
That's more than enough questions for now. Thanks to everyone involved
in producing these libraries and thanks in advance for any advice.
Cheers
Grant
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs@lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
