I've got my first draft of a draggable content-width control. The control
is a table cell 4px wide styled to appear like the right-border of the
content element.
I borrowed code sequences from the prototype windows-class add-in which also
supports dragging. There are a few new things I don't understand. First
among them is Event.stop() which calls Event.preventDefault(). I don't see
this in prototype.js. Anyone know what this is? Cancelling the bubbling I
understand.
Here's my first hack.
I have completely faked the new width calculation using a hard-coded value
iWidthOffset, not knowing exactly how to get the width = function(
xPosition, contentDivLeftOffset).
Any comments, simplifications, clarifications or haiku appreciated.
var resize = {
iWidthOffset: 227, // Magic number which makes width calculation
come out right. Greater than the offset of the left side of the DIV.
mouseDown: function (event) {
// Once clicked, the hand is quicker than the code, so watch
the event on the entire document
Event.observe(document, "mouseup", resize._endDrag, false);
Event.observe(document, "mousemove", resize._updateDrag,
false);
// Stop selection while dragging. I assume this turns off
selection of body elements during drag?
document.body.ondrag = function () { return false; }; // I
have no idea
document.body.onselectstart = function () { return false; };
// I have no idea
Event.stop(event); // Not sure why this is needed.
},
_endDrag: function (event) {
// Mouse click is over. Stop the drag
Event.stopObserving(document, "mouseup", resize._endDrag,
false); // Kill the drag stop event handler
Event.stopObserving(document, "mousemove",
resize._updateDrag, false); // Kill the drag handler
// Store new location/size if need be
// this._saveCookie()
Event.stop(event); // Stop bubbling ?
// Restore selection
document.body.ondrag = null; // I have no idea
document.body.onselectstart = null; // I have no idea. I
guess this is enabling text-selection as a default.
},
_updateDrag: function (event) {
var dx = Event.pointerX(event); // Current x position of
mouse in the viewable area or document body? I don't know which.
// Resize case, update width/height
$('maincontent').setStyle( {'width': parseInt(dx) -
resize.iWidthOffset + 'px'} ) ; // All this, just to do this one statement.
Event.stop(event); // No bubbles please.
},
mouseOver: function (event) {
$('contentresizecell').addClassName('contentresizecell-hover'); // Add a
visible hover on this cell
},
mouseOut: function (event) {
$('contentresizecell').removeClassName('contentresizecell-hover'); // Remove
the visible hover on this cell
}
}
_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
