Question

我有一个只能由Y轴拖动的元素。我希望它能够越过屏幕的顶部（它可以），但禁止它越过屏幕的底部。我在jQuery Draggable API中读到了关于包容的内容，但是对于我提出的问题没有找到答案，或者至少无法理解如何将其应用到我的案例中。到目前为止，这是我的代码：

的JavaScript：

$(document).ready(function() {
    $("#elem").draggable({
       axis: "y"
    });
});

Answer 1

必须有更好的方法，但是;

$(document).ready(function() {
    $("#elem").draggable({
       axis: "y",
       drag: function(event, ui) {
            if($(this).offset().top + $(this).outerHeight() > $(window).height()) {
                $(this).offset({"top": $(window).height() - $(this).outerHeight()});
                event.preventDefault();
            }
       }
    });
});

Answer 2

您需要将包含选项设置为页面高度。

$(document).ready(function() {
    $("#elem").draggable({
       containment: "document",
       scroll: false,
       axis: "y"
    });
});

可拖动 - 如何限制可拖动元素越过屏幕底部？

2 个答案: