html结构

<!DOCTYPE html>
<html lang="en">
<head></head>
<body ontouchstart>
    <div class="页面主体部分" style="width: 100%;height: 9999px">
        <p>测试内容</p>
        <p>测试内容</p>
        <p>测试内容</p>
    </div>
    <!-- 最好放到外层，不然可能被覆盖而无法拖动-->
    <!-- 至少给定一个max-width，最好给一个固定width-->
    <div class="被拖动元素" id="dragBtn"
         style="position: fixed; z-index: 999; width: 4em; text-align: center; background-color: #000; color: #fff; right: 0; bottom: 0">
        <a style="display: block;border-bottom: #fff 1px solid"><span>咨询<br>服务</span></a>
        <a style="display: block"><span>个人<br>中心</span></a>
    </div>
</body>
</html>

页面效果图

image.png

JS 插件（draggabilly）主要实现方法

// 通过被拖动元素的id获取元素节点并创建一个拖动对象
let dragObj = new Draggabilly(document.querySelector('#dragBtn'));
/**
 * 实现拖动事件结束时的回调
 * 主要操作为
 *     1.获取浏览器窗口可用宽高
 *     2.获取元素宽高
 *     3.获取元素拖动结束时的上下左右边距
 *     4.设置计算后的上下左右边距（当元素某一项当前边距小于0时，
 *        设置当前边距为auto，对边距为实际边距）
*/
dragObj.on("dragEnd", () => {
    dragObj.element.style.opacity = 1;//恢复拖动时的透明度

    // 边界计算函数
    let setBoundary = (a, b) => a < 0 ? '0px' : b < 0 ? "auto" : toString(Math.ceil(a)).concat('px');

    // 获取浏览器可用宽高
    let _w = window ? window.innerWidth : document.documentElement.offsetWidth;
    let _h = window ? window.innerHeight : document.documentElement.offsetHeight;
    // 获取被拖动元素宽高
    let w = parseFloat(window.getComputedStyle(dragObj.element).getPropertyValue("width").split("px")[0]);
    let h = parseFloat(window.getComputedStyle(dragObj.element).getPropertyValue("height").split("px")[0]);
    // 获取被拖动元素释放时的left，top，right，bottom
    let l = parseFloat(dragObj.element.style.left.split("px")[0]);
    let t = parseFloat(dragObj.element.style.top.split("px")[0]);
    let r = _w - l - w;
    let b = _h - t - h;

    console.log(_w, _h, w, h, l, t, r, b);
    // 使用边界计算函数并设置定位
    dragObj.element.style.left = setBoundary(l, r);
    dragObj.element.style.right = setBoundary(r, l);
    dragObj.element.style.top = setBoundary(t, b);
    dragObj.element.style.bottom = setBoundary(b, t);

    console.log(
        dragObj.element.style.left,
        dragObj.element.style.right,
        dragObj.element.style.top,
        dragObj.element.style.bottom
    );
});

最终代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body ontouchstart>
    <div class="页面主体部分"></div>
    <!--最好放到外层，不然可能无法拖动-->
    <div class="被拖动元素" id="dragBtn" 
         style="position: fixed; z-index: 999; background-color: #000; color: #fff">
        <a><span>咨询<br>服务</span></a>
        <a><span>个人<br>中心</span></a>
    </div>

</body>
<!--这里使用draggabilly插件-->
<script src="https://cdn.bootcss.com/draggabilly/2.2.0/draggabilly.pkgd.min.js"></script>
<script>
    // 一般的拖动元素的初始化配置
    // let drag_param_config = {
    //     containment: true,// 边界容器,true为父元素 boolean|"selector"
    //     handle: false,//使用其他元素执行拖动 false|"selector"
    //     axis: false,//拖动的轴 false|"x"|"y"
    //     grid: false,//网格 false|"[x,y]"
    // };

    // 通过被拖动元素的id获取元素节点并创建一个拖动对象
    let dragObj = new Draggabilly(document.querySelector('#dragBtn'));

    // 事件回调
    dragObj.on('dragMove', () => {
    });

    // 事件回调
    dragObj.on('staticClick', (instance, ev) => {
        console.log('单击拖动元素')
    }).on("dragStart", function () {
        // 拖动开始事件回调
        this.element.style.opacity = .5;//设置拖动时的透明度
        this.element.style.bottom = 'auto';
    });

    // 拖动结束事件回调，主要实现这里
    dragObj.on("dragEnd", () => {
        dragObj.element.style.opacity = 1;//恢复拖动时的透明度

        // 边界计算函数
        let setBoundary = (a, b) => a < 0 ? '0px' : b < 0 ? "auto" : toString(Math.ceil(a)).concat('px');

        // 获取浏览器可用宽高
        let _w = window ? window.innerWidth : document.documentElement.offsetWidth;
        let _h = window ? window.innerHeight : document.documentElement.offsetHeight;
        // 获取被拖动元素宽高
        let w = parseFloat(window.getComputedStyle(dragObj.element).getPropertyValue("width").split("px")[0]);
        let h = parseFloat(window.getComputedStyle(dragObj.element).getPropertyValue("height").split("px")[0]);
        // 获取被拖动元素释放时的left，top，right，bottom
        let l = parseFloat(dragObj.element.style.left.split("px")[0]);
        let t = parseFloat(dragObj.element.style.top.split("px")[0]);
        let r = _w - l - w;
        let b = _h - t - h;

        console.log(_w, _h, w, h, l, t, r, b);
        // 使用边界计算函数并设置定位
        dragObj.element.style.left = setBoundary(l, r);
        dragObj.element.style.right = setBoundary(r, l);
        dragObj.element.style.top = setBoundary(t, b);
        dragObj.element.style.bottom = setBoundary(b, t);

        console.log(
            dragObj.element.style.left,
            dragObj.element.style.right,
            dragObj.element.style.top,
            dragObj.element.style.bottom
        );
    });
</script>
</html>