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

Question

我正在使用 https://github.com/nakupanda/bootstrap3-dialog 创建对话框，但在手机上，对话框大多大于屏幕尺寸。在桌面上，当我将宽度更改为与移动设备相同的大小时，我们可以使用鼠标拖动对话框 header，但在移动设备上无法完成。

这是屏幕尺寸。

向左拖动后的对话框

有没有办法让对话框在移动设备上可拖动？或者有更好的解决方案吗？

编辑

我尝试使用更简单的设置重现该问题，但它显示 .modal-dialog 上使用的 css 不同：

问题：

更简单的设置：

现在我知道问题出在 CSS' min-width 属性。然后我通过在创建 BootstrapDialog

时替换属性来破解它

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

Answer 1

对于对话框大小，我认为这在评论中得到了回答。要在手机上拖动 [draggable : true] 周围的对话框，您必须在源代码中稍作更改。

bootstrap3-dialog 根本不响应 touchstart、touchend 和 touchmove ^{{reference}[=32= 等移动事件].}

看看第 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²：上面的重构只是作为一个此时此地的解决方案。您应该 raise the issue 在 github 项目站点上。我相信作者们也会认为让 bootstrap3-dialog 移动设备就绪也是一个好主意。

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

How to make BootstrapDialog movable on mobile

javascript

css

bootstrap-modal

twitter-bootstrap-3