Bootstrap的modal拖动效果

废话不多说了，直接给大家贴代码了，具体代码如下所示：

(function(){
function moveModal($this){
var $head = $this.find('.modal-header');
var $dialog = $this.find('.modal-dialog');
var move = {
isMove: false,
left: 0,
top: 0
};
//委托
console.log('点击的是',$this);
$this.on('mousemove', function(e){
if(!move.isMove) return;
console.log('移动的是', e.target);
$dialog.offset({
top: e.pageY - move.top,
left: e.pageX - move.left
});
}).on('mouseup', function(e){
move.isMove = false;
});
$head.on('mousedown', function(e){
move.isMove = true;
var offset = $dialog.offset();
move.left = e.pageX - offset.left;
move.top = e.pageY - offset.top;
});
}
var oldModal = $.fn.modal;
$.fn.modal = function(o, _r){
var $this = $(this);
if(!$this.attr('ifbindmv')){
$this.attr('isbindmv','1');
moveModal($this);
}
return oldModal.call(this, o, _r);
}
////要拖动的div背景
//$('#showErr').modal({backdrop: 'static'});
})();

以上所述是小编给大家介绍的Bootstrap的modal拖动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

• 基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
• 使用bootstrap实现多窗口和拖动效果
• bootstrap实现弹窗和拖动效果
• Bootstrap Table列宽拖动的方法