Question

我的情况是这样的：

我有一个大容器，屏幕大小是静态的，有overflow:hidden。里面是一个非常大的div jqueryui-draggable。里面有很多很小的div。

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

我发现的大多数解决方案仅适用于页面滚动。是否有某种事件我可以绑定到可拖动的？

Answer 1

<强>声明我还没有测试过这个，但希望它至少可以给你一个方向。

要掌握的最大概念是每次在可拖动容器上调用.drag（）方法时检查每个子项以确定它是否完全在视口中。您可以根据需要修改逻辑以淡入/淡出元素，或者让孩子在完全在视图中之前被视为可见。

<强> 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 draggable移出视口的元素

1 个答案: