悬浮窗的移动

参考：https://blog.csdn.net/qq_29132907/article/details/90241245

css

        * {
            margin: 0;
            padding: 0;
        }

        body{
            position: relative;
        }
        #spig {
            width: 500px;
            height: 30px;
            background-color: #aaa;
            position: absolute;
            z-index: 99;
            cursor: move;
            /* 阴影效果 */
            /* box-shadow: 5px 5px 10px #555; */
        }
        #fa{
            position: absolute;
            width: 500px;
            height: 330px;
            background-color: #ccc;
        }

　　html

    <div id="spig">可拖动</div>
    <div id="fa"></div>

　　js

        //拖动
        var _move = false;
        var ismove = false; //移动标记
        var _x, _y; //鼠标离控件左上角的相对位置
        jQuery(document).ready(function ($) {
            $("#spig").mousedown(function (e) {
                _move = true;
                //鼠标在元素中距离元素边框的长度
                _x = e.pageX - parseInt($("#spig").css("left"));
                _y = e.pageY - parseInt($("#spig").css("top"));
            });
            $(document).mousemove(function (e) {
                if (_move) {
                    //鼠标移动的长度
                    var x = e.pageX - _x;
                    var y = e.pageY - _y;
                    var wx = $(window).width() - $('#spig').width();
                    var dy = $(document).height() - $('#spig').height();
                    if (x >= 0 && x <= wx && y > 0 && y <= dy) {
                        $("#spig").css({
                            top: y,
                            left: x
                        }); //控件新位置
                        $("#fa").css({
                            top: y,
                            left: x
                        }); //控件新位置
                        ismove = true;
                    }
                }
            }).mouseup(function () {
                _move = false;
            });
        });

　注:position: absolute;是必要的,也可以是fixed

$(document).height()是文档的高度

$(window).width()是可见区域的宽度,也就是窗口宽度