菜单

Modal添加拖拽的方法

2020年3月24日 - 新闻中心

澳门太阳集团,正文实例汇报了layer前端组件完成图片展现效果的点子。分享给我们供我们参谋,具体如下:

精解为Bootstrap Modal增多拖拽的不二等秘书技,bootstrapmodal

互连网有为数不少给Bootstrap
Modal增多拖拽完成,不过过多代码看起来都相比复杂感到封装性恐怕也不太好,有的竟然动用了jquery
ui的拖拽功效,这一个都不是自家想要的,其实笔者在给Bootstrap
Modal增加拖拽成效的政工已是前年新年的时候了,弹指一挥间一年就过去了。二零一七年新岁佳节的时候,由于事情未发生前项目有同事使用layer来做前端,可是对于自身这种略懂js前端的后端开荒来讲,让自个儿引进layer和layui的一站式东西是不方便的,曾经差十分的少的浏览过layui的部分零零件,开掘组件功用不是很齐全,能够预感的是稍微复杂点的体系中期就能推动超多坑。因此那时候就选择了bootstrap去作为前端的css框架,也一大波施用modal那样的机件来做弹出窗口。

手续(基于3.3.4或越来越高的3.x版本State of Qatar:

1.开发bootstrap.js源代码找到modal组件代码块,在Modal.DEFAULTS代码块下参与拖拽代码达成。

Modal.DEFAULTS = {
 backdrop: true,
 keyboard: true,
 show: true
}
//新加入的拖拽
Modal.prototype.draggable = function () {
 var $ele = this.$element;
 var mouseOffset;
 var $modalDialog = $ele.find(".modal-dialog");
 var dialogOffset;

 $ele.find(".modal-header").on('mousedown', function (event) {
 $(this).addClass({cursor: 'move'});
 $('body').addClass('select');
 dialogOffset = $modalDialog.offset();
 mouseOffset = {
  top: event.pageY - dialogOffset.top,
  left: event.pageX - dialogOffset.left
 };
 $('body').on("mousemove", function (event) {
  var left = event.pageX - mouseOffset.left;
  var top = event.pageY - mouseOffset.top;
  if (left < 10) {
  left = 0;
  } else if (left > $(window).width() - $modalDialog.width()) {
  left = $(window).width() - $modalDialog.width();
  }
  if (top < 10) {
  top = 0;
  } else if (top > $(window).height() - $modalDialog.height()) {
  top = $(window).height() - $modalDialog.height();
  }
  $modalDialog.offset({
  top: top,
  left: left
  });
 });
 });

 $(document).on("mouseup mouseleave", function () {
 $('body').off("mousemove");
 });
}
  1. 在modal的show方法中加多调用draggable方法

    Modal.prototype.show = function (_relatedTarget) {

     var that = this
     var e = $.Event('show.bs.modal', {relatedTarget: _relatedTarget})
    
     this.$element.trigger(e)
    
     if (this.isShown || e.isDefaultPrevented()) return
    
     this.isShown = true
    
     //调用draggable()增加拖拽
     this.draggable()
     this.checkScrollbar()
     this.setScrollbar()
     this.$body.addClass('modal-open')
    
     this.escape()
     this.resize()
     //......省略
    

    }

落成地点的操作后向来引进刚刚改善的源码js在页面就已经能够很好的支撑拖拽了,并且整个拖拽是在可视窗口范围内,不会超过边界。

Modal添加拖拽的方法。注意事项:做到地方的源码校正后最棒将bootstrap的源码压缩打包,不熟知自动营造的能够停松开放的网址压缩,熟习自动化塑造的最佳利用gulp、webpack那样的前端自动化学工业具来打包压缩源代码减弱网页加载进程中攻克带宽。当然也建议将文件命名字为bootstrap-draggable.min.js相似的称谓,方便一目了然的猜到那文件与原本文件有啥不相同。除此而外你也得以一贯下载bootstrap3.x版本的源代码,然后改过里面包车型大巴modal.js,然后使用它本人grunt构建来重新打包。

主题材料引深:bootstrap
4.0+的本子源码和3.x的本子对照modal组件的匡正并不超级大,相近能够应用上边的不二等秘书技。满含让modal居中也可改善源代码来成功。

上述就是本文的全体内容,希望对大家的读书抱有利于,也盼望我们多多照顾帮客之家。

Modal增加拖拽的情势,bootstrapmodal 网络有大多给Bootstrap
Modal增加拖拽完结,但是过多代码看起来都相比复杂以为封装性大概也…

落到实处图片突显效果:layer

1.在此介绍一种layer前端组件

layer是一款口碑极佳的web弹层组件,她具备全体的消除方案,致力于服务种种档期的顺序段的开采职员,您的页面会轻便地享有丰富而团结的操作体验。

官方网站下载地址:

抑或点击这里本站下载

那边注意几点:在动用layer前端组件以前,我们要引进layer的js文件

注意:layer.js文件应当在jquery前边引进,因为layer.js是基于jquery.js的!

2.json

福寿年高图片显示效果还亟需json:

{ //您服务端接口需严格按照下述格式返回 "status": 1, //请求的状态,1表示成功,其它表示失败 "msg": "", //状态提示语 "title": "", //相册标题 "id": number型, //相册id "start": 0, //初始显示的图片序号,默认0 "data": [ //相册包含的图片,数组格式 { "name": "", //图片名 "pid": number型, //图片id "src": "", //原图地址 "thumb": "", //缩略图地址 "area": [638, 851] //原图宽高 } ]}

StringBuilder str = new StringBuilder();

的append方法依照上边的链接起来,应当要标准

return str.toString();

实际的用法也足以到官网

另:layui完整源码可点击这里本站下载

仰望本文所述对大家基于layui框架的次序设计具备助于。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图