1

我有这个可以垂直拖出屏幕的 div。我想知道是否有办法检测该 div 是否已超过某个限制，然后显示一个动画，它会自动滑出页面。到目前为止我所做的事情我认为应该可以工作，但是可惜的是，我对 JavaScript 的平庸知识导致了它的丑陋结局。这是我到目前为止所拥有的：

$(document).ready(function() {
    $("div").draggable({
       axis: "y", // vertical drag only
       drag: function(event, ui) { // THIS NEXT BLOCK JUST MAKES SURE IT WON'T DRAG OFF THE BOTTOM OF SCREEN
            if($(this).offset().top + $(this).outerHeight() > $(window).height()) {
                $(this).offset({"top": $(window).height() - $(this).outerHeight()});
                event.preventDefault();
            }
       }
    });

    if($("div").css("top") == "-340px") {
        $("div").animate({
            top: "-100%"
        });
    }
});

我知道 jQuery UI“可拖动”使用该属性top，因为我查看了 Google Chrome 的调试器工具，并且当我拖动它时动态插入内联样式，并且我top: -(x)px;在拖动 div 时阅读了继续攀爬。所以，从逻辑上讲，我测试了它是否被拖过，-340px然后自动拖到剩下的路。

revert而且，如果可能的话，如果 div没有过去，我希望它下拉（使用？） -340px，但这真的不是一个大问题。

4

1 回答 1

1

您的情况不在正确的位置；一旦 Drag 被触发，您应该进行验证！

请参阅下面的代码检查位置是否高于 100 并触发动画：

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div id="draggable" class="ui-widget-content ui-draggable" style="position: relative;">
    <p>Drag me around</p>
</div>
<script>
$(document).ready(function() {
    $("div").draggable({
       axis: "y", // vertical drag only
       drag: function(event, ui) { // THIS NEXT BLOCK JUST MAKES SURE IT WON'T DRAG OFF THE BOTTOM OF SCREEN
            if($(this).offset().top + $(this).outerHeight() > $(window).height()) {
                $(this).offset({"top": $(window).height() - $(this).outerHeight()});
                event.preventDefault();
            }

             if(Number($("div").css("top").replace("px","")) > 100) {
                $("div").animate({
                    top: "-100%"
                });
            }
       }
    });
});
</script>
</body>
</html>
于 2012-12-02T01:12:38.917 回答