Make your div draggable (mobile terminal)

It can be achieved by introducing jQuery UI on the computer side. The mobile phone does not have events such as mousemove, so mobile events are used here: touchstart and touchmove to achieve drag.

1. Introduction:

Just import jQuery.js and dragger.js (below)

Note: The drag and drop part is transferred from: 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,
            });
        },
    })
});

2. Realization:

Set some properties (the script code block can be skipped)

<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>

Key html code (only three lines)

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

Remember to like and follow after implementation, please leave a message if you have any questions