//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");
});
})
他们之间有差异,第二种是鼠标点击就直接移动到鼠标的位置,
注意,移动的距离:鼠标最后停止的位置 - 初始的位置(即鼠标位置减自身的大小,)