$("#box").mousedown(function (e) { //e鼠标事件 var offset = $(this).position();//DIV在页面的位置 使用position定位 //var offset = $(this).offset();//DIV在页面的位置 一般使用offset var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离 var thas = $(this); $("body").on("mousemove", function (ev) { //绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 var _x = ev.pageX - x;//获得X轴方向移动的值 var _y = ev.pageY - y;//获得Y轴方向移动的值 thas.animate({ left: _x + "px", top: _y + "px" }, 10); }); }); $(".box").mouseup(function () { $("body").off("mousemove"); });