详解为Bootstrap Modal添加拖拽的方法

大佬教程收集整理的这篇文章主要介绍了详解为Bootstrap Modal添加拖拽的方法，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

网上有许多给Bootstrap Modal添加拖拽实现，但是许多代码看起来都比较复杂感觉封装性可能也不太好，有的甚至使用了jquery ui的拖拽功能，这些都不是我想要的，其实我在给Bootstrap Modal添加拖拽功能的事情已经是2017年春节的时候了，弹指一挥间一年就过去了。2017年春节的时候，由于之前项目有同事使用layer来做前端，但是对于我这种略懂js前端的后端开发来说，让我引入layer和layui的一整套东西是艰难的，曾经大致的浏览过layui的一些组件，发现组件功能不是很完备，可以预见的是稍微复杂点的项目后期就会带来很多坑。因此当时就使用了bootstrap去作为前端的css框架，也大量使用modal这样的组件来做弹出窗口。

步骤(基于3.3.4或更高的3.x版本)：

1.打开bootstrap.js源代码找到modal组件代码块，在Modal.DEFAULTS代码块下加入拖拽代码实现。

SEOffset; 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");
});
}

大佬总结

以上是大佬教程为你收集整理的详解为Bootstrap Modal添加拖拽的方法全部内容，希望文章能够帮你解决详解为Bootstrap Modal添加拖拽的方法所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。