如何在移动设备上移动BootstrapDialog

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

这是屏幕尺寸。

对话之后被拖到左边。

有没有一种方法，使在移动对话框dragable？还是有更好的解决方案？

编辑

我试图用简单的设置来重现问题，但它显示了.modal-dialog使用不同的CSS：

问题：

简单的设置：

现在我知道问题是CSS'min-width属性。后来我通过更换物业创造BootstrapDialog

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

来源

2015-10-15 Kokizzu

你可以在这里找到不同的模态大小http://nakupanda.github.io/bootstrap3-dialog/寻找标题'更多的对话框大小'，并使模态响应或你可以检查在这个http://getbootstrap.com/javascript /＃模式大小，它也支持 – Shehary

@Kokizzu发布您的代码为这种模式 –

我不知道为什么我不能用简单的设置重现问题-__-）/ || – Kokizzu

对于对话框的大小，我认为这是在评论回答时破解它。要在手机上拖动对话框[draggable : true]，您必须在源代码中稍微改变一点。

bootstrap3的对话中也根本就没有移动事件，如touchstart，touchend和touchmove^{{} reference回应}。

看看的代码行1080：
https://github.com/nakupanda/bootstrap3-dialog/blob/master/src/js/bootstrap-dialog.js#L1080

添加移动事件，以便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; 
}, 
...

注：没有经过充分测试，但我我相信这是唯一的方法。

NB²：上面的重构仅仅是作为一个现在和现在的解决方案。您应该在github项目网站上使用raise the issue。我相信作者们会认为让bootstrap3对话框移动也是一个好主意。

来源

2015-10-15 10:49:09 davidkonrad

如何在移动设备上移动BootstrapDialog

回答

相关问题