个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我的情况是这样的:
我有一个屏幕大小的大容器，它是静态的并且有overflow:hidden。里面是一个非常大的div，它是jqueryui-draggable。里面有很多很多小的 div。
默认情况下小 div 都是隐藏的，我希望它们在移入视口(viewport)(顶部父容器)时出现并在移出时消失。请记住，所有移动都是通过拖动非常大的中间 div 完成的。
我发现的大多数解决方案都只适用于页面滚动。我可以将某种事件绑定(bind)到可拖动对象吗？
最佳答案
免责声明我还没有测试过这个，但希望它至少能给你一个方向。
要掌握的最大概念是每次在可拖动容器上调用 .drag() 方法时检查每个子项以确定它是否完全在视口(viewport)内。您可以修改逻辑以根据需要淡入/淡出您的元素，或者允许 child 在完全进入 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();
});
}
});
关于javascript - 选择由 Jquery 可拖动移出视口(viewport)的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30292730/
25
4
0
我正在尝试获得一个按钮，按下该按钮时会改变颜色。当再次按下时，它应该变回原来的颜色。我究竟做错了什么？ 我的模板中的按钮: export default { data: {
我是一名优秀的程序员,十分优秀！