网上有许多给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代码块下加入拖拽代码实现。
$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");
});
}
2. 在modal的show方法中添加调用draggable方法
this.$element.trigger(e)
if (this.isShown || e.isDefaultPrevented()) return
this.isShown = true
//<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>draggable()<a href="https://www.jb51.cc/tag/zengjia/" target="_blank" class="keywords">增加</a>拖拽
this.draggable()
this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open')
this.escape()
this.resize()
//......省略
}
完成上面的操作后直接引入刚刚修改的源码js在页面就已经能够很好的支持拖拽了，而且整个拖拽是在可视窗口范围内，不会超出边界。