我的情况是这样的：
我有一个大的容器，其大小与屏幕的大小相同，是静态的，且具有overflow:hidden。内部是一个非常大的div，即jqueryui-draggable。里面有很多小div。
小div默认情况下都是隐藏的，我希望它们在移入视口（顶部父容器）时显示，而在移出视口时消失。请记住，所有移动都是通过拖动非常大的中间div完成的。
我发现的大多数解决方案仅适用于页面滚动。我可以绑定到可拖动对象吗？
最佳答案
免责声明
我尚未对此进行测试，但希望它至少可以为您提供指导。
掌握的最大概念是，每次在可拖动容器上调用.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();
});
}
});
关于javascript - 选择通过Jquery可拖动移出视口(viewport)的元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30292730/