Javascript 如何使BootstrapDialog在移动设备上可移动

我用它来制作一个对话框，但在手机上，对话框大多比屏幕大。在桌面上，当我将宽度更改为与mobile相同的大小时，我们可以使用鼠标拖动对话框标题，但在mobile上无法完成

这是屏幕大小

将对话框拖动到左侧后将显示该对话框

有没有一种方法可以让对话框在手机上拖动？ 还是有更好的解决方案

编辑

我试图使用更简单的设置重现该问题，但它显示了在

.modal dialog

上使用的不同css：

问题是：

更简单的设置：

现在我知道问题出在CSS的minwidth属性上。 然后在创建

BootstrapDialog

onshown: function() {
  $('.modal-dialog').css('min-width', 'auto');
}

---

对于对话框大小，我认为这在评论中得到了回答。要在手机上拖动对话框[

draggable:true

]，必须在源代码中稍作更改

bootstrap3对话框不响应移动事件，例如

touchstart

、

touchend

和

touchmove

{}

查看第1080行的代码：

添加移动事件，以便也可以在移动设备上拖动bootstrap3对话框：

...
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;
},
...

注：完全未经测试，但我确信这是唯一的出路

---

注意：上面的重构只是作为一种“此时此地”的解决方案。您应该访问github项目站点。我相信作者们会认为让bootstrap3 dialog mobile也准备好是一个好主意。

您可以在这里找到不同的模式大小查找标题

更多对话框大小

，并使模式响应，或者您可以查看以下内容：，它也是supported@Kokizzu发布此模式的代码我不知道为什么我无法用更简单的设置重现此问题-_;-）/||