Selecting elements moved out of viewport by Jquery draggable

Question

My situation is this:

I have a large container the size of the screen which is static and has overflow:hidden. Inside is a very large div that is jqueryui-draggable. Inside that are many many small divs.

The small divs are all hidden by default, I'd like them to appear when they move into the viewport(top parent container) and disappear when moved out. Keep in mind all the moving is done by dragging the very large middle div.

Most of the solutions I've found only work on page scroll. Is there some sort of event I could bind to the draggable?

Can you post a screenshot? It's a little difficult to understand what you're describing. It sounds like you are creating something like how Google Maps has a large draggable surface that allows you to drag and move the contents around...? — Danny Bullis, May 17 '15 at 22:20
Second, there's no event that I know of that fires when an element is inside of or outside of the viewport. You'll have to track x,y coordinates (left, top) of the elements relative to the parent large div, and create a function to check its position everytime your elements 'drag' method gets fired. — Danny Bullis, May 17 '15 at 22:22
Very similar to that yes, drag around a large container and have it's many small children fade in and out depending on if they are in the viewport — jrabramson, May 17 '15 at 22:22
Is your large parent div able to be dragged in all directions or only one direction (either up/down or left/right)? — Danny Bullis, May 17 '15 at 22:23
Ok cool. That will change the math / checking a little. I'll post some code in a second. — Danny Bullis, May 17 '15 at 22:26

score 0 · Accepted Answer · answered May 17 '15 at 22:55

Disclaimer I haven't tested this, but hopefully it at least gives you a direction.

The biggest concept to grasp is to check each child to determine whether it is fully within the viewport every time the .drag() method is called on your draggable container. You can modify the logic to fade your elements in / out as needed or to allow the child to be considered visible even before it is fully within view.

CSS

.parent {
    position: absolute;
    overflow: hidden;
    height: 5000px; /* example */
    width: 5000px; /* example */
} 
.child {
    position: absolute;
    height: 50px;
    width: 50px;
}

HTML

<body>
<div class='parent'>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <!-- ... -->
</div>
</body>

JQUERY

$( ".parent" ).draggable({
    drag: function( event, ui ) {
        var parentTop = ui.position.top;
        var parentLeft = ui.position.left;
        var windowHeight = $(window).height();
        var windowWidth = $(window).width();

        $('.child').each(function(index) {
            var childTop = $(this).position().top;
            var childLeft = $(this).position().left;
            var childWidth = $(this).width();
            var childHeight = $(this).height();

            // check whether the object is fully within the viewport
            // if so - show, if not - hide (you can wire up fade)

            ((childLeft >= -(parentLeft) && childTop <= -(parentTop) &&
             (childLeft + childWidth) <= (-(parentLeft) + windowWidth) &&               
             (childTop + childHeight) <= (-(parentTop) + windowHeight)))
             ? $(this).show() 
             : $(this).hide();
        });
    }
});

I ended up going in a fairly different path, but this absolutely helped me a bunch. Thanks! — jrabramson, May 18 '15 at 17:46

Selecting elements moved out of viewport by Jquery draggable

1 Answers1