随鼠标移动的窗口

//html
<div id="box" style="width: 100px; height: 100px；position:absolute; background: red">
    会随鼠标移动的窗口
</div>

//js
var oDiv = document.getElementById("box");

      oDiv.onmousedown = function(e) {
            var x = e.clientX;
            var y = e.clientY;  //获取鼠标指针坐标
            var l = oDiv.offsetLeft;
            var t = oDiv.offsetTop; //获取自身div的大小
         // 得出移动时的坐标
        var L = x - l, T = y - t;
        
        document.onmousemove = function(e) {
              var moveX = e.clientX ;//移动的坐标
              var moveY = e.clientY;
              oDiv.style.left = moveX - L;
              oDiv.style.top = moveY - T;  
          }
      }
// 鼠标松开
      oDiv.onmouseup = function() {
               document.onmousedown = null;
               document.onmousemove= null;
      }

//jq

     $(function() {
        $("#box").mousedown(function(e) {

            var l = parseInt($("#box").css("left"));
            var t = parseInt($("#box").css("top"));

            var L = e.pageX - l;
            var T = e.pageY - t;
            console.log(L + "||" + T)

            $("#box").bind("mousemove", function(e) {
                var moveX = e.pageX - L;
                var moveY = e.pageY - T;
                $("#box").css({
                    "left": moveX,
                    "top": moveY
                });
            })
        });

        $("#box").mouseup(function() {

            $("#box").unbind("mousemove")
        });
     });

另一种简单的jq方法

    $(function() {
        $("#box").mousedown(function(e) {
            /*var l = parseInt($("#box").css("left"));
            var t = parseInt($("#box").css("top"));
            var L = e.pageX - l;
            var T = e.pageY - t; */

            $("#box").bind("mousemove" ,function(e) {
                $("#box").css({
                    "left": e.pageX + "px",
                    "top" : e.pageY + "px"
                              /*"left": e.pageX - L + "px",
                    "top" : e.pageY - T + "px"*/
                })
            });
        });
        $("#box").mouseup(function() {
            $("#box").unbind("mousemove");
        });
     })

他们之间有差异，第二种是鼠标点击就直接移动到鼠标的位置，
注意，移动的距离：鼠标最后停止的位置 - 初始的位置(即鼠标位置减自身的大小，)