2015-10-15 182 views
1

我使用https://github.com/nakupanda/bootstrap3-dialog來創建對話框,但在手機上,對話框的大小要大於屏幕尺寸。在桌面上,當我將寬度更改爲與移動設備相同的尺寸時,我們可以使用鼠標拖動對話框標題,但無法在移動設備上完成。如何在移動設備上移動BootstrapDialog

這是屏幕尺寸。

before dragging

對話之後被拖到左邊。

after dragging

有沒有一種方法,使在移動對話框dragable? 還是有更好的解決方案?

編輯

我試圖用簡單的設置來重現問題,但它顯示了.modal-dialog使用不同的CSS:

問題:

the problematic one

簡單的設置:

simpler setup

現在我知道問題是CSS'min-width屬性。 後來我通過更換物業創造BootstrapDialog

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

你可以在這裏找到不同的模態大小http://nakupanda.github.io/bootstrap3-dialog/尋找標題'更多的對話框大小',並使模態響應或你可以檢查在這個http://getbootstrap.com/javascript /#模式大小,它也支持 – Shehary

+0

@Kokizzu發佈您的代碼爲這種模式 –

+0

我不知道爲什麼我不能用簡單的設置重現問題-__-)/ || – Kokizzu

回答

1

對於對話框的大小,我認爲這是在評論回答時破解它。要在手機上拖動對話框[draggable : true],您必須在源代碼中稍微改變一點。

bootstrap3的對話中也根本就沒有移動事件,如touchstarttouchendtouchmove{} 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對話框移動也是一個好主意。