鼠标的事件有很多,这里要用到的是mousedown事件。
mousedown事件定义和用法:
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
与 click 事件不同,mousedown事件仅需要按键被按下,而不需要松开即可发生。
mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown事件时运行的函数。
$(function () {
var _move = false;//移动标记
var _x, _y;//鼠标离控件左上角的相对位置
$(".rightNav").click(function () {
})
.mousedown(function (e) {
_move = true;
_x = e.pageX - parseInt($(".rightNav").css("left"));
_y = e.pageY - parseInt($(".rightNav").css("top"));
});
$(document).mousemove(function (e) {
if (_move) {
var x = e.pageX - _x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y = e.pageY - _y;
}
$(".rightNav").css({ top: y, left: x });//控件新位置
})
.mouseup(function () {
_move = false;
})
})
上面的拖动代码是可以在页面上随意移动,也可以给它一个范围。
首先声明两个变量_x、_y来获取鼠标的left和top,在触发mousedown事件时判断鼠标的left和top是否在指定的范围内,超出就给_x,_y赋值,再给修改移动标签的left和top为_x,_y。
$(function () {
var _move = false;//移动标记
var _x, _y;//鼠标离控件左上角的相对位置
$(".rightNav").click(function () {
})
.mousedown(function (e) {
_move = true;
_x = e.pageX - parseInt($(".rightNav").css("left"));
_y = e.pageY - parseInt($(".rightNav").css("top"));
});
$(document).mousemove(function (e) {
if (_move) {
var x = e.pageX - _x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y = e.pageY - _y;
if (y < 75) {
y = 75;
} else {
if (y > 700) {
y = 700;
}
}
if (x < 75) {
x = 75;
} else {
if (x > 1400) {
x = 1400;
}
}
}
$(".rightNav").css({ top: y, left: x });//控件新位置
})
.mouseup(function () {
_move = false;
})
})
由于鼠标帧频过快,所以标签的样式最好不要设的太复杂以影响帧频的速度。