電腦端引入 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>

實現后記得點贊和關注哦，有疑問歡迎留言

總結

以上是生活随笔為你收集整理的让你的div可拖动（手机端）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。