js实现鼠标按下拖动标签

鼠标的事件有很多，这里要用到的是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;
            })
        })

由于鼠标帧频过快，所以标签的样式最好不要设的太复杂以影响帧频的速度。