通过 Jquery 拖动选择移出视口的元素

Question

我的情况是这样的：

我有一个屏幕大小的大容器，它是静态的并且有 overflow:hidden。里面是一个很大的div也就是jqueryui-draggable。里面有很多很多小的 div。

默认情况下小div都是隐藏的，我希望它们在移入视口（顶部父容器）时出现，移出时消失。请记住，所有移动都是通过拖动非常大的中间 div.

完成的

我发现的大多数解决方案都只适用于页面滚动。我可以将某种事件绑定到可拖动对象吗？

Answer 1

免责声明 我还没有测试过这个，但希望它至少能给你一个方向。

要掌握的最大概念是每次在可拖动容器上调用 .drag() 方法时检查每个 child 以确定它是否完全在视口内。您可以修改逻辑以根据需要淡入/淡出元素，或者允许 child 甚至在完全进入视图之前就被视为可见。

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

通过 Jquery 拖动选择移出视口的元素

Selecting elements moved out of viewport by Jquery draggable

html

javascript

css

jquery

jquery-ui-draggable