我正在使用https://github.com/nakupanda/bootstrap3-dialog进行对话框,但是在手机上,该对话框通常大于屏幕尺寸。在桌面上,当我将宽度更改为与移动设备相同的大小时,我们可以使用鼠标拖动对话框标题,但不能在移动设备上完成。
这是屏幕尺寸。
将对话框拖到左侧后。
有没有办法使对话框在移动设备上可拖动?
还是有更好的解决方案?
编辑
我尝试使用更简单的设置重现该问题,但它显示了.modal-dialog
上使用的不同CSS:
问题:
更简单的设置:
现在我知道问题出在CSS的min-width
属性。
然后我在创建BootstrapDialog
时通过替换该属性来对其进行修改
onshown: function() {
$('.modal-dialog').css('min-width', 'auto');
}
最佳答案
对于对话框大小,我认为这是在评论中回答的。要在手机上的[draggable : true
]周围拖动对话框,您必须在源代码中进行一些更改。
bootstrap3-dialog根本不响应诸如touchstart
,touchend
和touchmove
{reference}之类的移动事件。
看一下1080行的代码:
https://github.com/nakupanda/bootstrap3-dialog/blob/master/src/js/bootstrap-dialog.js#L1080
添加移动事件,以便bootstrap3-dialog也可以在移动设备上拖动:
...
makeModalDraggable: function() {
if (this.options.draggable) {
this.getModalHeader().addClass(this.getNamespace('draggable')).on('mousedown touchstart', {
dialog: this
}, function(event) {
var dialog = event.data.dialog;
dialog.draggableData.isMouseDown = true;
var dialogOffset = dialog.getModalDialog().offset();
dialog.draggableData.mouseOffset = {
top: event.clientY - dialogOffset.top,
left: event.clientX - dialogOffset.left
};
});
this.getModal().on('mouseup mouseleave touchend touchcancel', {
dialog: this
}, function(event) {
event.data.dialog.draggableData.isMouseDown = false;
});
$('body').on('mousemove touchmove', {
dialog: this
}, function(event) {
var dialog = event.data.dialog;
if (!dialog.draggableData.isMouseDown) {
return;
}
dialog.getModalDialog().offset({
top: event.clientY - dialog.draggableData.mouseOffset.top,
left: event.clientX - dialog.draggableData.mouseOffset.left
});
});
}
return this;
},
...
NB:完全未经测试,但是我坚信这是(唯一的)方法。
注意:上面的重构仅是一种即时解决方案。您应该在github项目站点上raise the issue。我相信作者会认为,也可以使bootstrap3-dialog做好移动准备。