bootstrap如何拖拽组件
1、到官网下载-基于3.3.4或更高的3.x版本的bootstrap.js
2、1.打开bootstrap.js源代码找到modal组件代码块:
Modal.DEFAULTS = {
backdrop: true,
keyboard: true,
show: true
}
...............................
......................
..................
.............
..........
....
...
3、在代码中加入：
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");
});
}
4、在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()
//......省略
}
5、完成上面的操作后直接引入刚刚修改的源码js在页面就已经能够很好的支持拖拽了，而且整个拖拽是在可视窗口范围内，不会超出边界。