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

Question

我知道如何使 datepicker ui 控件可拖动。我只是很难限制它的水平位移量。

很难用语言来解释。这是我想要实现的目标。

这是结果。

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

该差距大于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（全屏）

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