让你的div可拖动（手机端）

电脑端引入 jQuery UI 可以实现。而手机并没有 mousemove 等事件，所以这里采用手机事件：touchstart 和 touchmove 实现拖拽。

一、引入：

只要引入 jQuery.js 和 dragger.js（如下）即可

注：实现拖拽部分转自：https://blog.csdn.net/qq_39958629/article/details/90441003

window.dragger_settings = Array();
// 使用该类前 均可以修改这些属性
dragger_settings['contentWidth'] = '100%';         //默认为全屏移动，设置长款以限制移动范围
dragger_settings['contentHeight'] = '100%';
dragger_settings['box_sizing'] = 'border-box';      //清楚的看到可移动范围
dragger_settings['border'] = '1px solid red';
dragger_settings['padding_top'] = '20px';           //移动范围内边距
dragger_settings['padding_bottom'] = '20px';
dragger_settings['padding_left'] = '20px';
dragger_settings['padding_right'] = '20px';
dragger_settings['contentPosition'] = 'absolute';
dragger_settings['contentTop'] = '0';            //默认位置
dragger_settings['contentLeft'] = '0';

dragger_settings['commentWidth'] = '';              // 盒子承载的大小,设置为百分比会出错
dragger_settings['commentHeight'] = '';
dragger_settings['overflow'] = 'visible';            //这里不支持设置为hidden，会限制盒子内部东西的显示；
dragger_settings['commentPosition'] = 'absolute';
dragger_settings['commentTop'] = '0';            //默认位置
dragger_settings['commentLeft'] = '0';

// 赋予css属性
$(function () {
    $(".draggerContents").css({
        /*默认为全屏移动，设置长款以限制*/
        "width": dragger_settings.contentWidth,
        "height": dragger_settings.contentHeight,
        /*清楚的看到可移动范围*/
        "box-sizing": dragger_settings.box_sizing,
        "border": dragger_settings.border,
        /*移动范围内边距*/
        "padding-top": dragger_settings.padding_top,
        "padding-bottom": dragger_settings.padding_bottom,
        "padding-left": dragger_settings.padding_left,
        "padding-right": dragger_settings.padding_right,

        "position": dragger_settings.contentPosition,
        /*默认位置*/
        "top": dragger_settings.contentTop,
        "left": dragger_settings.contentLeft,
    });
    $(".draggerComments").css({
        "width": dragger_settings.commentWidth,
        "height": dragger_settings.commentHeight,
        "overflow":dragger_settings.overflow,
        "position": dragger_settings.commentPosition,
        /*默认位置*/
        "top": dragger_settings.commentTop,
        "left": dragger_settings.commentLeft,
    });
});
// 实现拖拽
$(function () {
    var startX, startY, sX, sY, moveX, moveY;
    var contW = $(".draggerComments").width();
    var contH = $(".draggerComments").height();

    var winH = $(".draggerContents").height();
    var winW = $(".draggerContents").width();

    var paddtop = parseInt($(".draggerContents").css("padding-top"));
    var paddbottom = parseInt($(".draggerContents").css("padding-bottom"));
    var paddleft = parseInt($(".draggerContents").css("padding-left"));
    var paddright = parseInt($(".draggerContents").css("padding-right"));

    $(".draggerComments").on({ //绑定事件
        touchstart: function (e) {
            startX = e.originalEvent.targetTouches[0].pageX; //获取点击点的X坐标
            startY = e.originalEvent.targetTouches[0].pageY; //获取点击点的Y坐标
            sX = $(this).offset().left; //相对于当前窗口X轴的偏移量
            sY = $(this).offset().top; //相对于当前窗口Y轴的偏移量

            leftX = startX - sX; //鼠标所能移动的最左端是当前鼠标距div左边距的位置
            rightX = winW - contW + leftX; //鼠标所能移动的最右端是当前窗口距离减去鼠标距div最右端位置
            topY = startY - sY; //鼠标所能移动最上端是当前鼠标距div上边距的位置
            bottomY = winH - contH + topY; //鼠标所能移动最下端是当前窗口距离减去鼠标距div最下端位置
        },
        touchmove: function (e) {
            e.preventDefault();
            //移动过程中XY轴的坐标要减去margin的距离
            moveX = e.originalEvent.targetTouches[0].pageX; //移动过程中X轴的坐标
            moveY = e.originalEvent.targetTouches[0].pageY; //移动过程中Y轴的坐标
            //判断的时候要计算加上padding的距离
            if (moveX < leftX + paddleft) {
                moveX = leftX + paddleft;
            }
            if (moveX > rightX + paddright) {
                moveX = rightX + paddright;
            }
            if (moveY < topY + paddtop) {
                moveY = topY + paddtop;
            }
            if (moveY > bottomY + paddbottom) {
                moveY = bottomY + paddbottom;
            }
            $(this).css({
                "left": moveX + sX - startX,
                "top": moveY + sY - startY,
            });
        },
    })
});

二、实现：

设置某些属性（script代码块 可略过）

<script>
    // 使用该类前 均可以修改这些属性，可修改属性：
    // 移动范围：
    dragger_settings['contentWidth'] = '100%';         //默认为全屏移动，设置长款以限制移动范围
    dragger_settings['contentHeight'] = '100%';
    dragger_settings['box_sizing'] = 'border-box';      //清楚的看到可移动范围
    dragger_settings['border'] = '1px solid red';       //如果不需要范围框架可将border宽度设置为0
    dragger_settings['padding_top'] = '20px';           //移动范围内边距
    dragger_settings['padding_bottom'] = '20px';
    dragger_settings['padding_left'] = '20px';
    dragger_settings['padding_right'] = '20px';
    dragger_settings['contentPosition'] = 'absolute';
    dragger_settings['contentTop'] = '0';            //默认位置
    dragger_settings['contentLeft'] = '0';
    // 承载盒子
    dragger_settings['commentWidth'] = '';              // 盒子承载的大小,设置为百分比会出错
    dragger_settings['commentHeight'] = '';
    dragger_settings['overflow'] = 'visible';            //这里不支持设置为hidden，会限制盒子内部东西的显示；
    dragger_settings['commentPosition'] = 'absolute';
    dragger_settings['commentTop'] = '0';            //默认位置
    dragger_settings['commentLeft'] = '0';
</script>

关键 html 代码（仅仅三行）

<!--draggerContents：移动范围。draggerComments：承载容器。-->
<div class="draggerContents">
    <div class="draggerComments">
   	    <!--这里写可拖拽div-->
        <div style="width: 200px;height: 200px;background-color: yellow"></div>
    </div>
</div>

实现后记得点赞和关注哦，有疑问欢迎留言