导航:[首页]->[js]->[支持主流浏览器的JS拖拽]

参考

  1. http://stackoverflow.com/questions/1685326/responding-to-the-onmousemove-event-outside-of-the-browser-window-in-ie/1745382#1745382
  2. http://msdn.microsoft.com/en-us/library/ms536742%28VS.85,loband%29.aspx
  3. http://msdn.microsoft.com/en-us/library/ms536689%28VS.85,loband%29.aspx
  4. http://code.jquery.com/jquery-1.8.0.min.js
  5. http://www.cnblogs.com/thinkingfor/archive/2010/11/08/1871736.html

兼容IE,FF,Chrome的拖拽(鼠标拖到浏览器外面也能够生效)

<!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 type="text/javascript" src="jquery-1.8.0.min.js"></script>
<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";
}

$(function(){
    makeDraggable($("#dragme")[0]);
});
</script>
</head>
<body>

<div id="dragme">Drag me (outside window)</div>

</body>
</html>