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、残りの方法で自動的にドラッグします。

また、可能であれば、 divrevertが通過しない場合は（ ? を使用して）ドロップダウンしたいと思いますが、それは-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 に答える