大佬教程收集整理的这篇文章主要介绍了完美解决bootstrap模态框允许拖动后拖出边界的问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
使用bootstrap3版本
在网上看了很多方法，我觉得jquery-ui的实现方法是最简单有效的，具体实现方法
1.下载并引入jquery-ui插件
2.全局添加模态框允许拖动事件
$(document).on("show.bs.modal",".modal",function(){ $(this).draggable({ handle: ".modal-header" // 只能点击头部拖动
cursor: ‘move‘,}); $(this).css("overflow","hidden"); // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的 });
这里记录一下bootstrap modal 的事件:
show.bs.modal：当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
hidden.bs.modal：当模态框完全对用户隐藏时触发。
这种解决模态框拖动的方法还不完美，由于设置了只能点击头部拖动，经常出现下面这种拖动出页面边界后，点不到头部所以无法拖动回来的情况
jquery-ui中可以设置约束运动，即添加 $( element ).draggable({ containment: "parent" });
但是设置draggable的.modal元素宽高是100%，导致无法拖动。
所以需要修改一下，让拖动元素改为.modal下的.modal-dialog，但是.modal-dialog有个css属性 margin:30px auto 对横向拖动有影响，为此就想办法修改这个属性，网上让模态框竖向居中正好适合。
在bootstrap.js或bootstrap.min.js文件中找到Modal.prototype.show方法。
在that.$element.addClass(‘in‘).attr(‘aria-hidden‘,falsE)代码前加入下面这段代码。
that.$element.children().eq(0).css("position","absolute").css({
"margin": "0px","top": function () {
return (that.$element.height() - that.$element.children().eq(0).height() - 40) / 2 + "px";
},"left": function () {
return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";
}
});
到这里就完美解决了！
以上是大佬教程为你收集整理的完美解决bootstrap模态框允许拖动后拖出边界的问题全部内容，希望文章能够帮你解决完美解决bootstrap模态框允许拖动后拖出边界的问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。