我在解决这个问题时遇到了一些麻烦。我查看了其他一些相关问题,但这些解决方案都不适合我。
this.$el.sortable({
placeholder: 'ui-state-highlight',
connectWith: '.connectedList',
dropOnEmpty: true
});
尽管尝试了其他解决方案中发布的一些 CSS 技巧,但这些项目仍然被推下,如下图所示:
您可以在此处查看代码示例:http://jsfiddle.net/jxFBj/1/
最佳答案
我想说问题的根源是内联元素的垂直对齐,默认情况下是基线。尽管内联和(内联) block 元素的混合以及边距的使用最终引发了问题。我想问题的真正根源是什么是有争议的。
不管怎样,我不能确定发生了什么,但对我来说,占位符(没有内联内容)看起来改变了基线的位置(不确定到底为什么),所以占位符的位置默认情况下是内联元素的图像也会发生变化。有几种方法可以解决这个问题:
使图像 block 元素:
.sortableList-item img {
display: block;
}
更新 (13.01.2015):对于最近的浏览器,display
技巧似乎与 vertical- 存在相同的问题对齐
下面提到的一种,即元素水平移动。
使用 float 元素而不是内联 block :
.ui-state-highlight {
float: left;
height: 100px;
width: 100px;
margin-right: 10px;
margin-bottom: 10px;
}
.sortableList-item {
float: left;
margin-right: 10px;
margin-bottom: 10px;
width: 100px;
height: 100px;
}
将垂直对齐方式更改为 top
也可以,但当列表元素跨越多行时会导致水平移动,因此这可能不是一个选项:
.ui-state-highlight {
height: 100px;
width: 100px;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
vertical-align: top;
}
.sortableList-item {
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
width: 100px;
height: 100px;
vertical-align: top;
}
关于jQuery UI Sortable 下推项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14317537/