我正在使用Sortable.js,但遇到以下问题:
我有一个要排序的项目列表,我需要第一个元素比其他所有 3 个元素更宽。
为了做到这一点,我有以下CSS:
#produto_img {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#produto_img > li {
height: 100px;
margin: 0 5px;
}
#produto_img > li:not(:first-child) {
flex: 1;
}
#produto_img > li:first-child {
width: 100%;
height: 200px;
margin-bottom: 10px;
}
当我在第一个项目之后开始拖动任何项目时它工作正常,即使我用第一个项目切换它也能正常工作。
它创建以下标记:
但是当我从第一个开始拖动时,我会丢失样式,因为插件会在其位置创建另一个项目并将其设置为display: none
,因此:first-child
选择器将不再起作用,并且它会丢失样式。
这个 gif显示了正在发生的事情。
我的第一个挑战是以某种方式跳过第一个元素,如果它是display: none
,或者使用类似的东西:first-child:visible
,但这显然不起作用。
有什么解决方法吗?