如何在移動設備上移動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

回答

相關問題