電腦端引入 jQuery UI 可以實(shí)現(xiàn)。而手機(jī)并沒有 mousemove 等事件，所以這里采用手機(jī)事件：touchstart 和 touchmove 實(shí)現(xiàn)拖拽。

一、引入：

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

注：實(shí)現(xiàn)拖拽部分轉(zhuǎn)自：https://blog.csdn.net/qq_39958629/article/details/90441003

dragger.js：

window.dragger_settings = Array(); // 使用該類前 均可以修改這些屬性 dragger_settings['contentWidth'] = '100%'; //默認(rèn)為全屏移動(dòng)，設(shè)置長款以限制移動(dòng)范圍 dragger_settings['contentHeight'] = '100%'; dragger_settings['box_sizing'] = 'border-box'; //清楚的看到可移動(dòng)范圍 dragger_settings['border'] = '1px solid red'; dragger_settings['padding_top'] = '20px'; //移動(dòng)范圍內(nèi)邊距 dragger_settings['padding_bottom'] = '20px'; dragger_settings['padding_left'] = '20px'; dragger_settings['padding_right'] = '20px'; dragger_settings['contentPosition'] = 'absolute'; dragger_settings['contentTop'] = '20px'; //默認(rèn)位置 dragger_settings['contentLeft'] = '20px';dragger_settings['commentWidth'] = ''; // 盒子承載的大小,設(shè)置為百分比會(huì)出錯(cuò) dragger_settings['commentHeight'] = ''; dragger_settings['overflow'] = 'visible'; //這里不支持設(shè)置為hidden，會(huì)限制盒子內(nèi)部東西的顯示； dragger_settings['commentPosition'] = 'absolute'; dragger_settings['commentTop'] = '20px'; //默認(rèn)位置 dragger_settings['commentLeft'] = '20px';// 賦予css屬性 $(function () {$(".draggerContents").css({/*默認(rèn)為全屏移動(dòng)，設(shè)置長款以限制*/"width": dragger_settings.contentWidth,"height": dragger_settings.contentHeight,/*清楚的看到可移動(dòng)范圍*/"box-sizing": dragger_settings.box_sizing,"border": dragger_settings.border,/*移動(dòng)范圍內(nèi)邊距*/"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,/*默認(rèn)位置*/"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,/*默認(rèn)位置*/"top": dragger_settings.commentTop,"left": dragger_settings.commentLeft,}); }); // 實(shí)現(xiàn)拖拽 $(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; //獲取點(diǎn)擊點(diǎn)的X坐標(biāo)startY = e.originalEvent.targetTouches[0].pageY; //獲取點(diǎn)擊點(diǎn)的Y坐標(biāo)sX = $(this).offset().left; //相對于當(dāng)前窗口X軸的偏移量sY = $(this).offset().top; //相對于當(dāng)前窗口Y軸的偏移量leftX = startX - sX; //鼠標(biāo)所能移動(dòng)的最左端是當(dāng)前鼠標(biāo)距div左邊距的位置rightX = winW - contW + leftX; //鼠標(biāo)所能移動(dòng)的最右端是當(dāng)前窗口距離減去鼠標(biāo)距div最右端位置topY = startY - sY; //鼠標(biāo)所能移動(dòng)最上端是當(dāng)前鼠標(biāo)距div上邊距的位置bottomY = winH - contH + topY; //鼠標(biāo)所能移動(dòng)最下端是當(dāng)前窗口距離減去鼠標(biāo)距div最下端位置},touchmove: function (e) {e.preventDefault();//移動(dòng)過程中XY軸的坐標(biāo)要減去margin的距離moveX = e.originalEvent.targetTouches[0].pageX; //移動(dòng)過程中X軸的坐標(biāo)moveY = e.originalEvent.targetTouches[0].pageY; //移動(dòng)過程中Y軸的坐標(biāo)//判斷的時(shí)候要計(jì)算加上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,});},}) });

二、實(shí)現(xiàn)：

設(shè)置某些屬性（dragger.js的配置部分 可略過）

<script>// 使用該類前 均可以修改這些屬性，可修改屬性：// 移動(dòng)范圍：dragger_settings['contentWidth'] = '100%'; //默認(rèn)為全屏移動(dòng)，設(shè)置長款以限制移動(dòng)范圍dragger_settings['contentHeight'] = '100%';dragger_settings['box_sizing'] = 'border-box'; //清楚的看到可移動(dòng)范圍dragger_settings['border'] = '1px solid red'; //如果不需要范圍框架可將border寬度設(shè)置為0dragger_settings['padding_top'] = '20px'; //移動(dòng)范圍內(nèi)邊距dragger_settings['padding_bottom'] = '20px';dragger_settings['padding_left'] = '20px';dragger_settings['padding_right'] = '20px';dragger_settings['contentPosition'] = 'absolute';dragger_settings['contentTop'] = '0'; //默認(rèn)位置dragger_settings['contentLeft'] = '0';// 承載盒子dragger_settings['commentWidth'] = ''; // 盒子承載的大小,設(shè)置為百分比會(huì)出錯(cuò)dragger_settings['commentHeight'] = '';dragger_settings['overflow'] = 'visible'; //這里不支持設(shè)置為hidden，會(huì)限制盒子內(nèi)部東西的顯示；dragger_settings['commentPosition'] = 'absolute';dragger_settings['commentTop'] = '0'; //默認(rèn)位置dragger_settings['commentLeft'] = '0'; </script>

關(guān)鍵 html 代碼（僅僅三行）

<!--draggerContents：移動(dòng)范圍。draggerComments：承載容器。--> <div class="draggerContents"><div class="draggerComments"><!--這里寫可拖拽div--><div style="width: 200px;height: 200px;background-color: yellow"></div></div> </div>

實(shí)現(xiàn)后記得點(diǎn)贊和關(guān)注哦，有疑問歡迎留言

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。