企业网站托管多少钱,东莞代理记账,凡科代理建站登录,金融建设网站电脑端引入 jQuery UI 可以实现。而手机并没有 mousemove 等事件#xff0c;所以这里采用手机事件#xff1a;touchstart 和 touchmove 实现拖拽。 一、引入#xff1a; 只要引入 jQuery.js 和 dragger.js#xff08;如下#xff09;即可 注#xff1a;实现拖拽部分转…电脑端引入 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 classdraggerContentsdiv classdraggerComments!--这里写可拖拽div--div stylewidth: 200px;height: 200px;background-color: yellow/div/div /div实现后记得点赞和关注哦有疑问欢迎留言