"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Signal Example
h1 {
font-size: 2em;
color: #4B4545;
text-align: center;
}
.draggable
{
color: white;
cursor: move;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
top: 200px;
width: 100px;
}
.blue { background: blue; }
.green { background: green; }
.red { background: red; }
.white
{
background: white;
border: 1px solid black;
color: black;
}
/*
Drag: A Really Simple Drag Handler
*/
Drag = {
_move: null,
_down: null,
start: function(e) {
e.stop();
// We need to remember what we're dragging.
Drag._target = e.target();
/*
There's no cross-browser way to get offsetX and offsetY, so we
have to do it ourselves. For performance, we do this once and
cache it.
*/
Drag._offset = Drag._diff(
e.mouse().page,
getElementPosition(Drag._target));
Drag._move = connect(document, 'onmousemove', Drag._drag);
Drag._down = connect(document, 'onmouseup', Drag._stop);
},
_offset: null,
_target: null,
_diff: function(lhs, rhs) {
return new MochiKit.Style.Coordinates(lhs.x - rhs.x, lhs.y - rhs.y);
},
_drag: function(e) {
e.stop();
setElementPosition(
Drag._target,
Drag._diff(e.mouse().page, Drag._offset));
},
_stop: function(e) {
disconnect(Drag._move);
disconnect(Drag._down);
}
};
connect(window, 'onload',
function() {
/*
Find all DIVs tagged with the draggable class, and connect them to
the Drag handler.
*/
var d = getElementsByTagAndClassName('DIV', 'draggable');
forEach(d,
function(elem) {
connect(elem, 'onmousedown', Drag.start);
});
});
connect(window, 'onload',
function() {
var elems = getElementsByTagAndClassName("A", "view-source");
var page = "draggable/";
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
var href = elem.href.split(/\//).pop();
elem.target = "_blank";
elem.href = "../view-source/view-source.html#" + page + href;
}
});
Dragging with MochiKit
This is an example of one might implement a drag handler with
MochiKit’s Signal.
For a detailed description of what happens under the hood, check out
draggable.js.
View Source: [
index.html |
draggable.js |
draggable.css
]
R