//html
<div id="box" style="width: 100px; height: 100px涕刚；position:absolute; background: red">
    會(huì)隨鼠標(biāo)移動(dòng)的窗口
</div>

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

      oDiv.onmousedown = function(e) {
            var x = e.clientX;
            var y = e.clientY;  //獲取鼠標(biāo)指針坐標(biāo)
            var l = oDiv.offsetLeft;
            var t = oDiv.offsetTop; //獲取自身div的大小
         // 得出移動(dòng)時(shí)的坐標(biāo)
        var L = x - l, T = y - t;
        
        document.onmousemove = function(e) {
              var moveX = e.clientX ;//移動(dòng)的坐標(biāo)
              var moveY = e.clientY;
              oDiv.style.left = moveX - L;
              oDiv.style.top = moveY - T;  
          }
      }
// 鼠標(biāo)松開(kāi)
      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")
        });
     });

另一種簡(jiǎn)單的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");
        });
     })

他們之間有差異末患，第二種是鼠標(biāo)點(diǎn)擊就直接移動(dòng)到鼠標(biāo)的位置伏恐，
注意咙咽，移動(dòng)的距離：鼠標(biāo)最后停止的位置 - 初始的位置(即鼠標(biāo)位置減自身的大小，)