Here's a simple script which moves the window.
window.onload = function () {
var grip = document.getElementById('grip'),
oX, oY,
mouseDown = function (e) {
if (e.offsetY + e.offsetX < 0) return;
oX = e.screenX;
oY = e.screenY;
window.addEventListener('mousemove', mouseMove);
window.addEventListener('mouseup', mouseUp);
},
mouseMove = function (e) {
window.moveTo(screenX + e.screenX - oX, screenY + e.screenY - oY);
oX = e.screenX;
oY = e.screenY;
},
gripMouseMove = function (e) {
this.style.cursor = (e.offsetY + e.offsetX > -1) ? 'move' : 'default';
},
mouseUp = function (e) {
window.removeEventListener('mousemove', mouseMove);
window.removeEventListener('mouseup', mouseUp);
};
grip.addEventListener('mousedown', mouseDown);
grip.addEventListener('mousemove', gripMouseMove);
}
The HTML & CSS
<div id="grip"></div>
#grip {
position: fixed;
bottom: 0px;
right: 0px;
border-bottom: 25px solid #ff0000;
border-left: 25px solid transparent;
}
Notice, that the only visible part of the #grip
is the border-bottom
of the div
.