js实现鼠标按下拖动标签

矫情吗；* 2022-03-25 14:36 528阅读 0赞

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

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