(Note: this answer refers exclusively to the “standard” drag implementation of mousedown -> mousemove -> mouseup. It is not applicable to the HTML5 drag specification).
Allowing dragging outside the browser window is an old problem that different browsers have solved in two ways.
With the exception of IE, when a user initiates a drag operation via mousedown browsers have done something neat (and this is all just from observation): a kind of statemachine kicks in to handle the special case of mouse movements outside the window:
- User triggers
mousedownevent inside thedocument - User triggers
mousemoveevent. Event fires even when triggered from outside thedocument(i.e. the window) - User triggers
mouseupevent (inside or outside thedocument).mousemoveevents triggered from outside the document no longer fire
IE and older versions of Firefox [as late as 2.0.20] don’t exhibit this behavior. Dragging outside the window just doesn’t work1.
The problem for IE and FF2 actually lies in whether an element is “selectable” or not (See here and here). If a dragging implementation does nothing (thereby allowing selection by the mouse), then said implementation does not have to account for movements outside the window; the browser will go ahead and fire mousemove properly and the user is allowed to drag freely outside the window. Nice.
However by letting the browser decide what to do on mousemove you get this effect where the browser thinks the user is trying to “select” something (eg the element), as opposed to moving it, and proceeds to frantically try to highlight the element or text therein as the mouse crosses in or out of the element during the drag.
Most drag implementations I’ve seen do a little trick to make the element being dragged “unselectable”, thereby taking full control of mousemove to simulate dragging:
elementToDrag.unselectable = "on";
elementToDrag.onselectstart = function(){return false};
elementToDrag.style.userSelect = "none"; // w3c standard
elementToDrag.style.MozUserSelect = "none"; // Firefox
This works nicely, but breaks dragging outside the window. 2
Anyway, to answer your question, to get IE (all versions) to allow dragging outside the window, use setCapture (and inversely releaseCapture when the mouse is released).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple drag demo</title>
<style>
#dragme {
position:absolute;
cursor:move;
background:#eee;
border:1px solid #333;
padding:10px;
}
</style>
<script>
function makeDraggable(element) {
/* Simple drag implementation */
element.onmousedown = function(event) {
document.onmousemove = function(event) {
event = event || window.event;
element.style.left = event.clientX + 'px';
element.style.top = event.clientY + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
if(element.releaseCapture) { element.releaseCapture(); }
};
if(element.setCapture) { element.setCapture(); }
};
/* These 3 lines are helpful for the browser to not accidentally
* think the user is trying to "text select" the draggable object
* when drag initiation happens on text nodes.
* Unfortunately they also break draggability outside the window.
*/
element.unselectable = "on";
element.onselectstart = function(){return false};
element.style.userSelect = element.style.MozUserSelect = "none";
}
</script>
</head>
<body onload="makeDraggable(document.getElementById('dragme'))">
<div id="dragme">Drag me (outside window)</div>
</body>
</html>
This is exactly what Google maps does (as I discovered since reverse engineering google maps back in 2004 when it was first released).
1I believe it actually only breaks when initiating a drag operation (i.e. mousedown) on a textnode. Element/container nodes do not exhibit the same behavior and can be dragged around inside or outside the document, provided the user moused down on an “empty ” portion of the element
2Again, for drag initiations on textnodes.