//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");
});
})
他們之間有差異,第二種是鼠標點擊就直接移動到鼠標的位置,
注意,移動的距離:鼠標最后停止的位置 - 初始的位置(即鼠標位置減自身的大小,)