javascript - 创建一个带边界的可拖动 jquery ui datepicker 控件

Question

我知道如何使日期选择器 UI 控件可拖动。我只是很难尝试限制它的水平位移量。

这很难用语言来解释。 Here is what I am trying to achieve.

and here is the result.

请注意如何水平拖动日期选择器。我不想:

该间隙大于 0。我希望日期选择器的右侧部分具有相同的行为，以便日历始终可见。现在，如果您将其向左拖动，则可以隐藏日历。另一方面，如果将它向右拖动，则无法隐藏它。如果您的屏幕太小，您将无法看到上个月的内容。

我应该采取什么方法来解决这个问题？

Answer 1

Draggable 会引发一些事件(start、drag、stop)，这些事件都提供一个辅助对象作为第二个参数，并偏移被拖动的元素:

• ui.position - 作为 {top, left} 对象的助手的当前位置，相对于偏移元素
• ui.offset - 作为 {top, left} 对象的助手的当前绝对位置，相对于页面

我的解决方案是当拖动停止时被拖动的元素被拖动到左边太远时，动画返回容器的边缘:

$("#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)

我认为您可以轻松地挖掘一点，通过正确的拖动获得相同的结果。