創建可拖動的jquery UI日期選擇器控件的界限

Question

我知道如何使日期選擇器UI控件拖動。我只是很難試圖限制水平位移量。

這很難用文字解釋。 Here is what I am trying to achieve.

and here is the result.

注意你怎麼能水平拖動日期選擇器。我不想：

這一差距要大於0。我想對日期選擇器的右側部分相同的行爲，這樣的日曆始終可見。現在，如果您向左拖動它，隱藏日曆是可行的。另一方面，如果將它向右拖，則無法隱藏它。如果你的屏幕很小，但你無法看到上個月。

我應該採取什麼方法來解決這個問題？

Answer 1

可拖動提出了一些事件（start，drag，stop），其提供所有的輔助對象作爲第二個參數與所述位置和偏移拖動的元素：

• ui.position - 輔助對象的當前位置爲{top，left}對象，相對於偏移元素
• ui.offset - 當前輔助爲{頂，左}對象，相對於頁面的絕對位置

我的解決辦法是將動畫回容器的邊緣時拖動的元素被拖過遠上拖動停止時左：

$("#draggable2").draggable({ 
    axis: "x", 
    ... 
    stop: function(e, ui) { 
     if (ui.offset.left > 0) { 
      $(this).animate({ 
       'left': (ui.position.left - ui.offset.left) + 'px' 
      }, 250); 
     } 
    }, 
    containment: $("#draggableParent") 
});​ 

DEMO
DEMO (full screen)

我認爲你可以輕鬆地挖掘一點點，以實現右拖動相同的結果。