Home/ Questions/Q 8928279
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T08:24:04+00:00

I have this div that can be dragged vertically off the screen. I want

  • 0

I have this div that can be dragged vertically off the screen. I want to know if there’s a way to detect if that div has reached passed a certain limit, then display an animation where it automatically slides off the page. What I have done so far I thought should work, but alas, my mediocre knowledge of JavaScript has reared it’s ugly end. Here’s what I have so far:

$(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%"
        });
    }
});

I know that the jQuery UI “Draggable” uses the property top because I looked in Google Chrome’s debugger tool and as I was dragging it dynamically inserts inline styles, and I read top: -(x)px; keep climbing while I was dragging the div. So, logically, I tested to see if it gets dragged pass -340px then just automatically drag it the rest of the way.

And also, if possible, I would like for the div to drop down (using revert?) if it doesn’t go past -340px, but that’s not a huge issue really.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your condition is not in the right place; you should make the verification once the Drag even is fired !

    See bellow the code here check if position is upper then 100 and fire the animation :

    <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>
    • 0