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

一、引入：

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

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

dragger.js：

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'] = '20px';            //默认位置
dragger_settings['contentLeft'] = '20px';dragger_settings['commentWidth'] = '';              // 盒子承载的大小,设置为百分比会出错
dragger_settings['commentHeight'] = '';
dragger_settings['overflow'] = 'visible';            //这里不支持设置为hidden，会限制盒子内部东西的显示；
dragger_settings['commentPosition'] = 'absolute';
dragger_settings['commentTop'] = '20px';            //默认位置
dragger_settings['commentLeft'] = '20px';// 赋予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,});},})
});

二、实现：

设置某些属性（dragger.js的配置部分 可略过）

<script>// 使用该类前 均可以修改这些属性，可修改属性：// 移动范围：dragger_settings['contentWidth'] = '100%';         //默认为全屏移动，设置长款以限制移动范围dragger_settings['contentHeight'] = '100%';dragger_settings['box_sizing'] = 'border-box';      //清楚的看到可移动范围dragger_settings['border'] = '1px solid red';       //如果不需要范围框架可将border宽度设置为0dragger_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>

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